如何定位子菜单在主菜单（CSS）下正确显示？

我已经能够使用（display：inline）创建一个水平菜单，并且我现在有一个下拉菜单，这要感谢sousMenu。我的问题是，所有的子菜单，不管我悬停的元素，都出现在同一个地方。我如何解决这个问题？如何定位子菜单在主菜单（CSS）下正确显示？

我的菜单代码迄今：

<ul>    
<li><a href="Index.html">Home</a></li> 
<li class="sousMenu">About Us 
    <ul> 
    <li><a href="#">Board of Directors</a></li> 
    </br> 
    <li><a href="#">Student Profiles</a></li> 
    </br> 
    <li><a href="#">Projects</a></li> 
    </ul> 
</li> 
<li class="sousMenu">Get Involved 
<ul> 
    <li><a href="#">Donations</a></li> 
</br> 
    <li><a href="#">Job Board</a></li> 
</br> 
    <li><a href="#">Join</a></li> 
</ul> 
</li> 
<li class="sousMenu">Resources 
<ul> 
    <li><a href="#">Connections</a></li> 
    </br> 
    <li><a href="#">Gallery</a></li> 
    </br> 
    <li><a href="#">Tours</a></li> 
</ul> 
</li>

CSS：

#navcontainer ul { 
/*margin: 0;*/ 
margin-left: auto; 
margin-right: auto; 
padding: 0; 
top:180; 
right:20; 
width:800px; 
list-style-type: none; 
text-align: center; 
position: absolute; 
color: #fff; 
background-color: #003300; 
padding: .2em 1em; 
} 

#navcontainer ul li { 
display: inline; 
padding-left:2cm; 
} 

#navcontainer ul li a { 
text-decoration: none; 
color: #fff; 
background-color: #030; 
} 

#navcontainer ul li a:hover { 
color: #fff; 
background-color: #000; 
} 

.sousMenu:hover ul { 
display: block; 
} 

.sousMenu ul { 
text-align: center; 
display: none; 
list-style-type: none; 
}

来源

2013-07-15 user2585291

他们没有为我出现在同一个地方。每个人都从父元素定位：http://jsfiddle.net/vXhZb/ – DrCord

你尝试过使用display：inline-block; ?? – lukeocom

@lukeocom我试过内联块，但它仍然为我呈现相同的结果。 – user2585291

尝试设置父列表项position: relative和孩子ul到position: absolute对于初学者。为了达到预期的效果，我对代码做了一些其他细微的修改。

这里的CSS：

* { 
margin: 0; 
padding: 0; 
vertical-align: baseline; 
} 

li { 
list-style-type: none; 
} 
ul.main li { 
position: relative; 
display: inline-block; 
} 

.main li:hover > ul { 
display: block; 
} 

ul.sub { 
position: absolute; 
display: none; 
top: 100%; 
left: 0; 
} 

ul.sub li { 
display: block; 
}

我也清理了HTML一点。你缺少一个右</ul>标签以及：

<ul class="main">    
    <li><a href="Index.html">Home</a></li> 
    <li class="sousMenu">About Us 
     <ul class="sub about"> 
      <li><a href="#">Board of Directors</a></li> 
      <li><a href="#">Student Profiles</a></li> 
      <li><a href="#">Projects</a></li> 
     </ul> 
    </li> 
    <li class="sousMenu">Get Involved 
     <ul class="sub get-involved"> 
      <li><a href="#">Donations</a></li> 
      <li><a href="#">Job Board</a></li> 
      <li><a href="#">Join</a></li> 
     </ul> 
    </li> 
    <li class="sousMenu">Resources 
     <ul class="sub resources"> 
      <li><a href="#">Connections</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">Tours</a></li> 
     </ul> 
    </li> 
</ul>

这里的小提琴：http://jsfiddle.net/vXhZb/2/

来源

2014-04-22 14:24:38 MyCompassSpins

如何定位子菜单在主菜单（CSS）下正确显示？

回答

相关问题