导航：嵌套ul元素上的额外间距（但是为什么？）

Question

So I have a navigation.

NOTE : PLEASE LOOK AT THE FULL PAGE FIDDLE SNIPPET (NOT THE SMALLER SCREEN)

Problem : In the second nested ul (dropdown sub menu) with a positioning: absolute, the ul element doesn't align with the parent ul, upon checking inspect element, it turns out there is a right 20px:

Attempt: Weirdly this extra space is only in the first li nested ul ie Service -> Commercial, not the other parent li ie blog -> about (is aligned!)

IDEAS? HERE IS A PHOTO: https://imgur.com/a/7avUG

  /* NAVIGATION ON CLICK */ // Primary menu drop down (mobile) $( ".dropdown-toggle" ).click(function() { $(this).parent().find(".sub-menu:first" ).toggleClass("toggle-on"); }); /* NAVIGATION ON HOVER */ // Sub menu drop down $(".main-navigation ul li.menu-item-has-children").hover(function() { $(this).find(".sub-menu:first").toggleClass("toggle-on"); }); $(".primary-toggle").click(function() { $(" .main-navigation ul:first").toggleClass("toggle-on"); }); // $(".main-navigation li.menu-item-has-children").mouseleave(function() { // $(".sub-menu").removeClass("toggle-on"); // }); 

  /* # HEADER */ *, html { margin: 0; font-size: 22px; } .site-header { background-color: black; display: flex; justify-content: space-between; align-items: center; padding: 1rem; } /* Burger Nav Styling */ #sidebar-btn { vertical-align: middle; width: 40px; height: 25px; cursor: pointer; margin:10px; position: relative; top: 4px; } #sidebar-btn span { height: 2px; background: black; margin-bottom: 5px; display: block; } #sidebar-btn span:nth-child(2) { width: 75%; } #sidebar-btn span:nth-child(3) { width: 50%; } /* Main Menu */ .main-navigation { } /*.main-navigation .menu { display: none; padding: 1rem; } */ .menu-test-container { position: absolute; top: 90px; left: 0; width: 100%; } .main-navigation .menu.toggle-on { display: block; } .main-navigation ul li { min-width: 140px; margin-right: 30px } .main-navigation ul { display: none; padding: 0 1rem; position: relative; background-color: yellow; } .main-navigation ul li a { color: #fff; text-decoration: none; } /* SUB Menu styles */ .sub-menu.toggle-on { display: block; } .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul { list-style: none; display: none; } /* Positioning xy of EACH sub menus */ .main-navigation ul ul { background-color: pink; } .main-navigation ul ul ul { left: 150px; top: 0; background-color: blue; } .main-navigation ul ul ul ul { background-color: green; top: 20px; left: 0; } .main-navigation ul ul ul ul ul { background-color: black; top:0px; left: 200px; } .main-navigation ul ul ul ul ul ul { background-color: silver; top:0px; left: 200px; } @media only screen and (min-width: 468px) { .site-header { flex-direction: column; } /* Main Navigation - Getting rid of navburger */ #sidebar-btn { display: none; } .primary-toggle { display: none; } .main-navigation .menu.toggle-on { display: flex; background-color: blue; } .main-navigation ul { display: flex; align-items: center; flex-direction: row; justify-content: space-between; background-color: blue; } .menu-test-container { display: block; position: relative; top: 0; } /* end of */ } /* TABLET MENU */ @media only screen and (min-width: 768px) { .site-header { flex-direction: row; } body { background-color: yellow; } /* Main Navigation - Getting rid of navburger */ #sidebar-btn { display: none; } .primary-toggle { display: none; } .main-navigation .menu.toggle-on { display: flex; background-color: blue; } .main-navigation ul { display: flex; align-items: center; flex-direction: row; justify-content: space-between; background-color: blue; } .menu-test-container { display: block; position: relative; top: 0; } /* end of */ /* Sub menu navigation tablet */ /* Positioning xy of EACH sub menus */ .main-navigation ul ul { position: absolute; background-color: pink; padding: 20px 10px; } .main-navigation ul ul li { padding: 7px 1px; } .main-navigation ul ul li a { font-size: 90%; } .main-navigation ul ul ul { left: 0px; top: 0; background-color: blue; } .main-navigation ul ul ul ul { background-color: green; top: 20px; left: 0; } .main-navigation ul ul ul ul ul { background-color: black; top:0px; left: 200px; } .main-navigation ul ul ul ul ul ul { background-color: silver; top:0px; left: 200px; } } 

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://use.fontawesome.com/c083bcc66d.js"></script> </head> <body> <header id="masthead" class="site-header"> <div class="site-branding"> <div class="site-branding-text"> <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p> </div> </div><!-- .site-branding --> <nav id="site-navigation" class="main-navigation"> <button class="primary-toggle" aria-expanded="false"> <div id="sidebar-btn"> <span></span> <span></span> <span></span> </div> </button> <div class="menu-test-container"> <ul id="primary-menu" class="menu" aria-expanded="true"> <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035"> <a href="http://localhost/wordpress/services/">Services</a> <span class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span> </span> <ul class="sub-menu"> <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076"> <a href="http://localhost/wordpress/asd/">Commercial</a> <span class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span> </span> <ul class="sub-menu"> <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082"> <a href="http://localhost/wordpress/asd/">Rural</a> <span class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span> </span> <ul class="sub-menu"> <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081"> <a href="http://localhost/wordpress/services/">Electrical</a> <span class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span> </span> <ul class="sub-menu"> <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079"> <a href="http://localhost/wordpress/gallery/">Residential</a> <span class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span> </span> <ul class="sub-menu"> <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#"> asdasd</a></li> <li><a href="#"> asdasd</a></li> <li><a href="#"> asdasd</a></li> </ul> </li> <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"> <a href="http://localhost/wordpress/asd/">Projects</a> </li> <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045"> <a href="http://localhost/wordpress/blog/">Blog</a> <span class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span> </span> <ul class="sub-menu"> <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078"> <a href="http://localhost/wordpress/news-updates/">About</a> <span class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span> </span> <ul class="sub-menu"> <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"> <a href="http://localhost/wordpress/news-updates/">News Updates</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav><!-- #site-navigation --> <link rel="stylesheet" type="text/css" href="style.css"> </header> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html> 

Answer 1

The Dropdown Menu is perfectly aligned with the a

The padding: 0 1rem; of the <ul id="primary-menu" class="menu" aria-expanded="true"> is the reason for the "false" alignment

Instead of giving the primary-menu an padding you should add a padding to the a

Answer 2

change this:

    .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul  {
    list-style: none;
    display: none;
 }

to this:

    .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul  {
    list-style: none;
    display: none;
    margin-left:0;
    padding-left:0;
 }

Did that help?