2017-10-21 52 views
0

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.Menu Navigation Causant la couche de navigation entière pour dissoudre Html/CSS

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

Nav Menu

Répondre

0

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

Oh, merci d'avoir répondu, je viens de me le dire, mais merci beaucoup. – PreciousMetal

0

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