下拉菜单的定位如何工作？ [关闭]答案

【问题标题】：How does positioning work for drop down menus? [closed]下拉菜单的定位如何工作？ [关闭]
【发布时间】：2013-09-12 16:05:31
【问题描述】：

我知道下拉菜单是通过包装 unordered lists 和 list items 创建的。

下拉菜单的定位如何工作？

<div class="nav block">
  <ul>
    <li style="border-left:1px solid black;"><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
      <ul>
        <li><a href="#"> Porfolio</a></li>
      </ul>
    </li>

    <li><a href="#">Reviews</a>
      <ul>
        <li><a href="#">Spellen</a></li>
      </ul>
    </li>

    <li><a href="#">Releases</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

【问题讨论】：

哪一项应该是下拉菜单？
你在使用某种框架吗？是否有针对此的 CSS 设置或者是 JavaScript。此外，您的辅助 UL 也需要位于它所属的 LI 内。
你需要研究css下拉菜单
您打算如何显示下拉“子菜单”？通过鼠标单击或悬停？您必须在提问时更详细一点，否则用户无法正确回答您。

标签： css menu css-position

【解决方案1】：

这样

DEMO

CSS

li {
    float:left;
    position:relative;
     margin:0 10px;
}
li li {
    float:none;


}
    li li a {
        white-space:nowrap;

    }
li ul {
    position:absolute;
    top:1.1em;
    left:0;
    display:none;
    border:1px solid red;
}
li:hover ul {
    display:block;
}

【讨论】：

相对/绝对定位是这个问题的解决方案。谢谢。

【解决方案2】：

第一个大问题，可能是主要问题：您的子列表必须被包装到 <li> 标记中：

<div class="nav block">
    <ul>
        <li style="border-left:1px solid black;" ><a href="#">Home</a></li>
        <li>
            <a href="#">About Us</a>
            <ul>
                <li><a href="#"> Porfolio</a></li>  
            </ul>
        </li>
        <li>
            <a href="#">Reviews</a>
            <ul>    
                <li><a href="#">Spellen</a></li>
            </ul>
        </li>
        <li><a href="#">Releases</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

【讨论】：

这里如何显示没有css或javascript/jquery的下拉菜单？
@Nisha 我们这里显然没有足够的细节。我为这个明显的问题提供了一个解决方案，但 SO 仍然不是一个给我代码的网站。

【解决方案3】：

UL（子菜单）应位于 LI（菜单）内

<div class="nav block">
    <ul>
        <li style="border-left:1px solid black;" ><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>   
        <ul>
            <li><a href="#"> Porfolio</a></li>  
        </ul>
        <li>
        <a href="#">Reviews</a>
         <ul style="display:none;">    <!-- Sub menu -->
            <li><a href="#">Spellen</a></li>
         </ul>
        </li>
        <li><a href="#">Releases</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

【讨论】：