questions de menu de navigation avec css (arrière-plan n'apparaît pas derrière l'ensemble div)

Question

Je suis en train d'écrire un code CSS pour une page Web, i ont un menu de navigation en haut avec le code:

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

Le code CSS pour nav-menu incluent:

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

Cependant, il ne montre pas bgcolor.jpg derrière l'ensemble div, il montre juste derrière les boîtes et non pas derrière le tout en div (li). Quelqu'un peut-il voir quel est le problème ici?

Merci pour votre aide (si vous avez besoin de plus d'explications sur le problème s'il vous plaît demander et je vais la modifier avec des réponses)

Answer 1

Votre conteneur div croule parce que la hauteur n'est pas hérité de éléments de la liste. Ajouter un clair après le 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

Sonne comme un problème flottant. Essayez ceci:

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

Ou si cela ne fonctionne pas:

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