導航菜單的問題

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