Menu Navigation Causant la couche de navigation entière pour dissoudre Html/CSS

Question

Je suis donc en train de créer un menu déroulant sur mon site Web et la plupart ont réussi, mais j'ai un problème.

<div id="nav"> 
     <ul> 
      <li>content</li> 
      <li> 
       content 
       <ul> 
        <li>subcontent</li> 
        <li>subcontent</li> 
        <li>subcontent</li> 
       </ul> 
      </li> 
      <li>content</li> 
      <li>content</li> 
     </ul> 
    </div> 

Ci-dessus le contenu

body{ 
    margin: 0px; 
} 

ul, li{ 
    margin: 0px; 
    padding: 0px; 
} 

#nav{ 
    width: 100%; 
    background-color: #000000; 
    color: #ff0000; 
} 

#nav ul{ 
    position: absolute; 
    list-style-type: none; 
    text-align: center; 
    cursor: pointer; 
} 

#nav ul li{ 
    min-width: 100px; 
    display: inline-block; 
    border: 1px solid #000000; 
} 

#nav ul li:hover{ 
    background-color: #0000ff; 
} 

#nav ul li ul li{ 
    display: none; 
    margin-left: -1px; 
    margin-top: -1px; 
} 

#nav ul li:hover ul li{ 
    display: block; 
} 

Et qui est le CSS

Fondamentalement, parce que je suis mon positionnement contenu comme « absolu » afin d'arrêter quoi que ce soit d'être mal placé lorsque le menu déroulant est utilisé, la couche couche noire qui agit comme la section de la barre de navigation finit par disparaître. Y a-t-il un moyen de contourner cela, ou dois-je restructurer mon site complètement?

C'est ce qui est ressemble dans un navigateur:

Answer 1

Essayez d'ajouter background-color à ul, li

ul, li{ 
margin: 0px; 
padding: 0px; 
background-color: #000; 
} 

ou donner #nav une hauteur

#nav{ 
width: 100%; 
background-color: #000000; 
color: #ff0000; 
height: 50px; 
} 

Answer 2

Qu'à cela ne tienne, Je rea C'est parce que je n'avais pas défini de taille dans #nav.