CSS：为什么当我取出 Overflow:hidden 时会出现这种情况？

Question

因此，在类导航中，当我有溢出：隐藏时，那里有中心并且效果很好，但我不能使用溢出：隐藏，因为它会隐藏导航中的下拉菜单。

但是当我把它拿出来的时候，它就碎了？除了overflow:hidden之外，我还能使用什么来保持它看起来正确，并且不隐藏我的导航？

http://jsfiddle.net/xtian/svr8C/1/

Answer 1

只需设置 .nav 的高度（35px？）并删除 overflow: hide;

Answer 2

它导致overlfow隐藏清除所有浮动并赋予元素浮动li的高度。解决方案是这样的： http://jsfiddle.net/svr8C/11/

这条语句：

.nav:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}

添加一个lis 之后的不可见元素并清除它们。它取自著名的 oocss 媒体元素：https://github。 com/stubbornella/oocss/blob/master/core/media/media.css

Answer 3

尝试溢出：自动； - 这将清除浮动，类似于溢出：隐藏；但如果你不小心，可能会引入滚动条。或者，您可以尝试“全部浮动”方法：另一个浮动元素内的浮动元素也会强制清除浮动。

Answer 4

您可以使用此类内容。

HTML：

<ul class="menu">
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a>
        <ul class="submenu">
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
</ul>

CSS：

.menu li {
    display: inline-block;
}

.menu li a {
    color: #fff;
    background: orangered;
    text-decoration: none;
    padding: 0.5em;
    border-bottom: 5px solid #000;
}

.menu li .submenu {
    display: none;
}

.menu li:hover > .submenu {
    display: block;
    position: absolute;
    top: 30px;
}

.menu li .submenu li {
    display: block;
    margin-top: 20px;
}

这是演示