html - 溢出隐藏隐藏下拉菜单，但 overflow hidden 隐藏导航背景

Question

首先，这是一个 .js fiddle :http://jsfiddle.net/B6DSv/

我遇到的问题是我的 .css:

nav {
    overflow: hidden; /*THIS LINE*/
    background-color: #004b98;
    width: 100%;
    margin: 0;
    padding: 0;
}

这里:

<nav>
    <ul>
        <li><a href="index.html">Home</a>
            <ul>
                <li><a href="#">teadsfasdfadsst</a></li>
            </ul>
        </li>

        <li><a href="#">Gallery</a></li>
        <li><a href="#">Map</a></li>
    </ul>
</nav>

如果我取消 overflow: hidden;，下拉菜单会工作...但是我的背景被取消了。

Answer 1

由于子元素是 float 的(脱离文档流)，父元素 nav 自行折叠；因此，背景不会显示，因为 nav 的高度为 0。

与其使用overflow:hidden 来解决这个问题，不如添加一个clearfix。改为元素:

Updated Example

nav:after {
    content:'';
    clear:both;
    display:table;
}