html - css 的导航菜单问题(背景没有出现在整个 div 后面)

Question

我正在为网页编写 CSS 代码，顶部有一个导航菜单，代码如下:

    <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>

导航菜单的CSS包括:

.nav-menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: url(bgcolor.jpg) repeat-x;
}

.nav-menu li {
float: left;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;  
}

.nav-menu li a {
background: url(bgcolor.jpg) repeat-x;
line-height: 36px;
height: 40px;
float: left;
width: 9em;
border-top: 1px solid #01607E;
border-right: 1px solid #01607E;
border-bottom: 1px solid #01607E;
color: white;
font-family: "Lucida Sans";
font-size: 10pt;
text-decoration: none;
text-align: center;
}

但是，它并没有在整个 div 后面显示 bgcolor.jpg，它只是在 (li) 框后面显示，而不是在 while div 后面。谁能看出这里的问题是什么？

感谢您的帮助(如果您需要有关该问题的更多解释，请询问，我将编辑此答案)

Answer 1

您的容器 div 正在折叠，因为高度不是从列表项继承的。在ul后面加一个clear:

        <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
<div style="clear:both;"></div>
    </div>