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

时间：2018-01-10 13:30:32

标签： javascript jquery html css drop-down-menu

所以我有一个导航。

注意：请查看完整的页面信息（不是更小的屏幕）

问题：在第二个嵌套ul（下拉子菜单）中，定位：绝对，ul元素与父ul不对齐，检查inspect元素后，结果是右20px：

尝试： 奇怪的是，这个额外的空间只在第一个嵌套的ul中，即服务 - ＆gt;商业，而不是其他父母，即博客 - ＆gt;关于（已对齐！）

IDEAS？ 这是一张照片：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 x y 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 x y 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>

2 个答案:

答案 0 :(得分：0)

下拉菜单与a

完全一致

padding: 0 1rem;的{​​{1}}是“错误”对齐的原因

您应该在a

中添加填充，而不是给主菜单添加填充

答案 1 :(得分：0)

改变这个：

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

到此：

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

这有帮助吗？

相关问题
最新问题