溢出隐藏隐藏下拉列表,但隐藏溢出隐藏导航背景

Question

首先,这是一个.js小提琴: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

由于子元素是浮动的(从文档流中取出),因此父元素会nav自行折叠; 因此,背景未显示,因为nav其高度为0.

而不是overflow:hidden用来解决这个问题,只需在元素中添加一个clearfix:

更新的示例

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