将子菜单与主菜单对齐

时间：2017-04-17 08:53:01

标签： html css

我的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>

谢谢。

2 个答案:

答案 0 :(得分：1)

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

同样font-size: 14px solid无效，因为solid属于border-type属性，而font-size则不需要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; }。

参考代码：

＆＃13;
＆＃13; 
<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>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这将有助于您入门。

.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;
  left: 0;
  top: 100%;
}

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

.sub-menu li {
  width: 100% !Important;
}

.sub-menu li:hover .sub-sub-menu {
  display: block !important;
}

.sub-sub-menu {
  display: none !important;
  font-size: 14px solid;
  position: absolute;
  text-align: center;
  top: -2px;
  left: 100%;
}

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

.sub-sub-menu li {
  width: 100% !important;
  display: block !important;
  padding: 20px !important;
}
<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>

相关问题
最新问题