Question

我查看下拉菜单here的示例。 Here是简化的jsfiddle示例。我想基于它构建我自己的样式HTML元素。一切都好。但是在我的实现中，我需要将<ul class="dropdown">...</ul>包装为使用CSS设置的div，如下所示：

border: 2px solid green;
overflow: auto;

在这种情况下，带子菜单的ul stratch这个div（据我所知），这就是滚动条出现的原因。这是simplified jsfiddle example。

但如果使用以下css作为外部div - 一切正常：

border: 2px solid green;
height: 35px;

Here is jsfiddle example

你能帮助我理解 - 为什么我遇到“溢出：自动”案件的问题？

TIA！

Answer 1

您不希望为容器提供不可见的溢出，因为这会隐藏您的下拉列表。此外，还有很多浮动，现在可以{@ 1}}支持IE8 +。

我分叉了你的Jsfiddle，并在CSS部分的底部应用了CSS修复。这是你要找的东西：http://jsfiddle.net/rgthree/VFZRB/

Answer 2

这是因为<ul>（子菜单）<ul>中的ul.dropdown ul样式visibility:hidden如果您删除了该规则并添加display:none - 您赢了“看到滚动条，因为visibility:hidden保留了元素的宽度和高度并隐藏了元素，而display:none就像从DOM中删除元素一样。希望这有助于你

Answer 3

#killer{
border: 2px solid red;
overflow: visible;
}

<div id="killer">
<ul class="dropdown">
    <li><a href="./" class="dir">Menu</a>
        <ul>
            <li><a href="/js/">JavaScript</a></li>
            <li><a href="/photoshop/">Photoshop</a></li>
            <li><a href="/design/">Design</a></li>
            <li><a href="/misc/">Other</a></li>
        </ul>
    </li>
</ul>
<div style="clear:both;"></div>
</div>

绝对定位ul stratch parent div

3 个答案: