html - 如何定位子菜单以在主菜单(CSS)下正确显示？

Question

我已经能够使用 (display:inline) 创建一个水平菜单，并且由于 sousMenu，我现在有了一个下拉菜单。我的问题是所有子菜单，无论我悬停在哪个元素上，都出现在同一个地方。我该如何解决这个问题？

到目前为止我的菜单代码:

<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;
}​

Answer 1

尝试将父列表项设置为 position: relative和 child 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>

这是 fiddle :http://jsfiddle.net/vXhZb/2/