导航菜单的问题

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，它只是显示它后面的（李）盒，而不是同时DIV后面。任何人都可以看到这里有什么问题吗？

谢谢你的帮助（如果你需要有关问题的详细解释，请询问，我会与答案编辑这个）

Answer 1

你的div容器正在崩溃，因为高度不从列表项继承。 ul后添加清除：

 <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> 

Answer 2

听起来像一个漂浮的问题。试试这个：

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

或者，如果不工作：

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