Question

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

工作得很好，但是我想把创建的菜单放到另一个div区域，在页面上形成一个条形。

这只适用于我在此部分中添加溢出的内容：

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

然后停止下拉栏工作。

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

Answer 1

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

在#nav（或div）上使用固定高度将其展开到与其子项相同的高度（可能很关键：如果您没有在子项li上使用固定高度，你可能不知道它们的确切高度（=通过font-size，line-height和boxmodell来计算））

或

在clear:left;上使用#nav，在:after伪元素的帮助下（注意即＆lt; = 7！）或在周围div {{3}中使用额外元素}}

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

Answer 2

我不确定你想要实现什么，为什么你需要在这个例子中使用溢出？你能修改一下his example吗？

如果只是为了清除浮动，你可以使用clearfix（即6 +）。

Answer 3

我会试试这个：

变化：

  overflow: auto;

为：

  overflow: visible;

或者，如果您喜欢这种效果，请使用滚动条

变化：

  overflow: auto;

要：

   overflow: scroll;

这两个选项中的任何一个都可以帮助客户查看缺少的任何文本。它取决于您希望它的外观，以及您正在使用多少空间。但这两种选择中的任何一种都是可行的。希望这会有所帮助。