溢出隐藏隐藏下拉菜单，但将溢出隐藏隐藏在隐藏导航背景中

首先，这是一个 .js 小提琴：http://jsfiddle.net/B6DSv/ 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;，下拉菜单有效...但我的背景被取消了。

由于子元素是浮动的（从文档流中取出），因此父元素，nav，自行塌陷；因此，背景不会显示，因为nav高度为0.

而不是使用overflow:hidden要解决这个问题，只需添加一个clearfix https://stackoverflow.com/questions/8554043/what-is-clearfix改为元素：

更新的示例 http://jsfiddle.net/PmP29/

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