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

首先,这是一个.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>

如果我脱掉溢出：隐藏;,下拉工作…但我的背景被取消了.

解决方法

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

而不是使用overflow：hidden来修复此问题,而只需在元素中添加一个clearfix：

Updated Example

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