Question

我想知道为什么（想要实现下拉菜单），我的导航器没有水平对齐，我找了我知道的每一个错误，显然没有找到任何东西。任何人都可以帮我找到错误吗？或者我可以使用哪种方式使导航器对齐？ :)

body {
  background: #182530;
}

.clearfix:after {
  display: block;
  clear: both;
}

.menu-wrap {
  width: 100%;
  box-shadow: 0px 1px 3px #000000;
  background: #ffffff;
}

.menu {
  width: 1000px;
  margin: 0px auto;
}

.menu li {
  margin: 0px;
  list-style: none;
  font-family: helvetica;
  font-weight: bold;
  color: #000000;
}

.menu a {
  transition: all linear 0.15s;
  color: #000000;
  text-decoration: none;
}

.menu li:hover>a,
.menu .current-item>a {
  text-decoration: none;
  color: #be5b70;
}

menu>ul>li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}

.menu>ul>li>a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}

.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
  background: #2e2728;
}

.submenu {
  width: 10%;
  padding: 5px 0px;
  position: absolute;
  right: auto;
  z-index: -1;
  opacity: .0;
  transition: opacity linear 0.15s;
  background: #2e2728;
}

.menu li:hover .submenu {
  z-index: 1;
  opacity: 1;
}

.submenu li a {
  display: block;
}

<!doctype html>
<html lang="en">
 <head>
    <meta charset="utf-8">
	<title>
		Test Page
	</title>
	<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    </head>
    <body>
    	<header>
    		<div class="menu-wrap">
    		  <nav class="menu">
    		  	<ul>
    		  		<li><a href="#">Home</a></li>
    		  		<li><a href="#">About</a></li>
    		  		<li>
    		  		 <a href="current-item">Projects</a>
    		  		 <ul class="submenu">
    		  		 	<li><a href="#">WebIdentity</a></li>
    		  		 	<li><a href="#">LogoDesign</a></li>
    		  		 	<li><a href="#">Branding</a></li>
    		  		 </ul>
    		  		</li>
    		  		<li><a href="#">Contacts</a></li>
    		  	</ul>
    		  </nav>
    			
    		</div>
    	</header>
    </body>
</html>

如何对齐导航？错误在哪里？

Answer 1

也许你需要

.menu > ul > li {
    display: inline-block;
}

Answer 2

我通过添加

修复了代码

nav ul li {
display:inline;
}

Here is a working fiddle

不知道为什么我的导航没有对齐（css）

2 个答案: