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

我已经能够使用（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>              

---

首先，尝试将父列表项设置为

position:relative

，将子列表项设置为

ul

位置：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 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>

关于我们






参与进来






资源

---

这是小提琴：

它们对我来说不在同一个地方。每个元素都是从父元素定位的：是否尝试使用display:inline block@lukeocom我已经尝试了内联块，但它仍然为我呈现相同的结果。@DrCord我恐怕这只适用于JSFIDLE。。。我希望它能在JSFIDLE测试程序之外工作，然后在其他可以看到问题的地方编写一些代码。

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