html - 将子菜单与主菜单对齐

Question

我的 sub-menu 和 sub-sub-menu 之间似乎有很大的差距，并且与主菜单不对齐。我希望 sub-menu 从主菜单直接下拉，sub-sub-menu 在 sub-menu< 的右侧打开 悬停时。我该怎么做？

下面是我的代码:

   .nav-bar {
    	max-height: 0;
    	margin-left: 0;
    	padding-left:20px;
    	padding-top: 200px;
    }
    
    .box-nav-bar ul{
    	display:inline-block;
    	
    	text-decoration: none;
    	padding: 0;
    	list-style-type: none;
    	margin:0;
    }
    
    .box-nav-bar ul li{
    	display: inline-block;
    	padding: 20px;
    	border: 1px solid grey;
    	width: 100px;
    	height: 50px;
    	line-height: 50px;
    	
    	text-align: center;
    	position: relative;
    	
    }
    .box-nav-bar ul li a{
    	text-decoration: none;
    	list-style: none;
    	color: black;
    	font-size: 18px;
    	font-weight: bold;
    	font-family: Arial;
    	display:block;
    	
    }
    .box-nav-bar ul li:hover{
    	background-color: grey;
    	
    }
    
    .box-nav-bar ul .sub-menu ul li{
    	text-decoration: none;
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    	width: 150px;
    	
    	
    }
    .box-nav-bar ul .sub-menu {
    	display: none;
    	font-size: 14px solid;
    	position:absolute;
    	text-align: center;	
    }
    .box-nav-bar li:hover .sub-menu{
    	display: block;
    	
    }
    .sub-sub-menu{
    	display: none;
    	font-size: 14px solid;
    	position:absolute;
    	text-align: center;
    }
    
    .box-nav-bar li:hover .sub-menu li:hover{
    	display: block;
    	
    }

 <div class="nav-bar">
    		<nav class="box-nav-bar">
    			<ul>
    				<li> <a href="/Home">HOME</a></li>
    				<li> <a href="/Home">ABOUT</a></li>
    				<li> <a href="/Home">SERVICES</a>
    					<ul class="sub-menu">
    				        <li>
    							<a href="#">Lorem ipsum</a>
    						</li>
    						<li>
    							<a href="#">Dolor sit amet  </a>                      
    						</li>
    						<li>
    							<a href="#">Conse ctetur </a>
    								<ul class="sub-sub-menu">
    									<li>
    										<a href="#">Latest</a>
    									</li>
    									<li>
    										<a href="#">Archive</a>
    									</li>                      
    								</ul>
    						</li>
    					</ul>
    				</li>
    				<li> <a href="/Home">PROJECTS</a></li>
    				<li> <a href="/Home">CONTACTS</a></li>
    			</ul>
    		</nav>
    </div>

 

 

谢谢。

Answer 1

您的 .sub-menu 和 .sub-sub-menu 上有 position: absolute。您只需使用 top 和 left 属性对齐您的容器 block 。

此外，font-size: 14px solid 也是无效的，因为 solid 是一个 border-type 属性，font- 不需要尺寸。只需将其更改为 font-size: 14px。

引用代码:

.nav-bar {
  max-height: 0;
  margin-left: 0;
  padding-left: 20px;
  padding-top: 200px;
}

.box-nav-bar ul {
  display: inline-block;
  text-decoration: none;
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.box-nav-bar ul li {
  display: inline-block;
  padding: 20px;
  border: 1px solid grey;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
}

.box-nav-bar ul li a {
  text-decoration: none;
  list-style: none;
  color: black;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial;
  display: block;
}

.box-nav-bar ul li:hover {
  background-color: grey;
}

.box-nav-bar ul .sub-menu ul li {
  text-decoration: none;
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 150px;
}

.box-nav-bar ul .sub-menu {
  display: none;
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: 91px;
  left: 0;
}

.box-nav-bar li:hover .sub-menu {
  display: block;
}

.sub-sub-menu {
  display: none;
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: 0px;
  left: 140px;
}

.box-nav-bar li:hover .sub-menu li:hover {
  display: block;
}

<div class="nav-bar">
  <nav class="box-nav-bar">
    <ul>
      <li> <a href="/Home">HOME</a></li>
      <li> <a href="/Home">ABOUT</a></li>
      <li> <a href="/Home">SERVICES</a>
        <ul class="sub-menu">
          <li>
            <a href="#">Lorem</a>
          </li>
          <li>
            <a href="#">Dolor </a>
          </li>
          <li>
            <a href="#">Conse </a>
            <ul class="sub-sub-menu">
              <li>
                <a href="#">Latest</a>
              </li>
              <li>
                <a href="#">Archive</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> <a href="/Home">PROJECTS</a></li>
      <li> <a href="/Home">CONTACTS</a></li>
    </ul>
  </nav>
</div>