html - 纯 CSS 下拉菜单问题

Question

我正在使用显示的纯 CSS 菜单 here .

一切正常，但我想将创建的菜单放入另一个 div 区域以在页面上形成一个栏。

这仅在我在此部分中放置溢出时才有效:

#nav{
    list-style:none;
    margin-bottom:10px;
    margin-left:30%;
    width:100%;
    overflow:auto;
}

这将停止下拉栏的工作。

知道如何解决这个问题吗？

Answer 1

为了能够省略 overflow:auto/hidden; 你有几个选择:

在 #nav(或 div)上使用固定高度将其扩展到与其子项相同的高度(可能很关键:如果您不在子项上使用固定高度 lis，您可能不知道它们的确切高度(=通过字体大小、行高和 boxmodell 计算))

或

在 #nav 上使用 clear:left;，或者在 :after 伪元素的帮助下(注意 ie<=7 !) 或者在周围的 div 中添加一个额外的元素 (described here) .

<div id="wrapper">
 <ul id="nav">
    <li></li>
    ....
 </ul>
 <div style="clear:left;"></div>
</div>