3 niveau ul li ul li listtyle problème css

Question

je ne vais pas dans ce que j'ai une liste non ordonnée mais je ne fonctionne pas le style. espérons que vous pouvez m'aider!

Mon code html:

<ul id="sitemap-list"> 
    <li><a href="#" onclick="">LEV0</a> 
     <ul> 
      <li><a href="#" onclick="">LEV11</a></li> 
      <li><a href="#" onclick="">LEV1</a></li> 
     </ul> 
    </li> 

    <li><a href="#" onclick="">LEV0</a> 
     <ul> 
      <li><a href="#" onclick="">LEV1</a> 
       <ul> 
        <li><a href="#" onclick="">LEV2</a></li> 
        <li><a href="#" onclick="">LEV2</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Et mon code CSS:

#sitemap-list li ul li a { 
    display: block; 
    text-decoration: none; 
    list-style-type: none; 
    color: red; 
    margin-left: 20px; 
    margin-top: -5px; 
} 

#sitemap-list ul li ul li a { 
    display: block; 
    text-decoration: none; 
    list-style-type: none; 
    color: #6e90a6; 
    margin-left: 50px; 
} 

Le problème est que les premiers styles de css "bloc" tous les éléments de la liste avec une une étiquette.

Qu'est-ce que je fais de mal?

merci pour votre aide :)

Answer 1

Le sélecteur A B est le descendent selector et correspond tout élément B qui est un descendant d'un élément A, peu importe si elle est un descentent direct (nœud enfant d'un A élément) ou s'il s'agit simplement d'une descente transitive (par exemple, nœud enfant d'un nœud enfant d'un élément A).

Si vous voulez sélectionner uniquement les nœuds enfants immédiats, utilisez le child selector A > B:

#sitemap-list > li > ul > li > a { /* … */ } 
#sitemap-list > li > ul > li > ul > li > a { /* … */ } 

Mais depuis Internet Explorer ne prend pas en charge le sélecteur d'enfant, vous devez « réinitialiser » les propriétés qui ont été écrasé, par exemple la margin-top propriété:

#sitemap-list ul li ul li a { 
    margin-top: 0; 
}