¿Cómo separar estilos en un estilo de lista anidada?

Question

Tengo una lista y la lista también tiene una lista.
Configuré estilos en la lista primaria, pero quiero diferentes estilos para la lista primaria y secundaria, pero están mezclados, de alguna manera no puedo separarlos.

archivo HTML:

<ul id="accountNavigation"> 
    <li><a href="#">Something</a></li>      
    <li id="userNavigation"> 
    <img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/> 
    <a href="#">Username</a> 
    <div class="showme"> 
     <ul id="userNavigationSubMenu"> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 
     <li>test</li> 

     </ul> 
    </div> 
    </li> 
</ul> 

archivo CSS:

body{background:#ff0000;} 
#accountNavigation{ list-style: none;float: right;height: 44px;} 
#accountNavigation li{ float: left;color: #fff;height: 44px;} 
#accountNavigation li:hover{ background: #ddd;cursor: pointer;} 
#accountNavigation li a{ text-decoration: none;color: #fff;line-height: 44px;font-weight: bold;font-size: 13px;height: 44px;padding: 15px 27px 0 14px;outline: none;} 
#accountNavigation li img{ position: absolute;top: 12px;left: 10px;width: 22px;height: 22px;} 
#userNavigation{position: relative;} 
#userNavigation a {padding-left: 38px !important;} 

#userNavigation{} 
#userNavigation:hover{} 
#userNavigation:hover .showme{display: inline;} 
.showme 
{ 
    display: none; 
    width: 140px; 
    height: 200px; 
    background: #f5f5f5; 
    margin: 0px auto; 
    padding: 10px 5px 0px 5px; 
    border: 1px solid #ddd; 
    border-top: none; 
    z-index: 10; 
    position: absolute; 
    right:0; 
    top: auto; 

} 
#userNavigation ul { list-style: none;} 

Ésta es fiddle.

Answer 1

basta con utilizar el > combinador descendiente directo/inmediata, y un id para especificar qué li (o ul) los elementos a los que orienta:

#accountNavigation { /* outer ul element */ 
} 

#accountNavigation > li { /* outer ul element's children li */ 
} 

#accountNavigation > li > ul { /* first 'inner' ul element */ 
} 

#accountNavigation > li > ul > li { /* first 'inner' ul element's li children */ 
} 

Puede, por supuesto, ser más genérico y simplemente utilizar :

ul { /* targets all ul elements */ 
    /* general styles */ 
} 
ul li { /* targets all li elements within a ul */ 
    /* general styles */ 
} 
ul li ul { /* targets all ul elements within an li element, itself within a ul */ 
    /* overrule general 'outer' styles */ 
} 
ul li ul li { /* targets all li elements within a ul element, 
       within an li element, itself within a ul...and so on */ 
    /* overrule general 'outer' styles */ 
} 

Utilizando el enfoque general:

<ul> 
    <li>This should be green!</li> 
    <li>This is also green... 
     <ul> 
      <li>But this is not, it's, um...blue!</li> 
      <li>And so on...</li> 
     </ul></li> 
    <li>This is green too, just because.</li> 
</ul> 

El siguiente CSS debe demostrar su uso:

ul li { 
    color: green; /* the 'general'/'default' settings */ 
    margin-left: 10%; 
} 

ul li ul li { 
    color: blue; /* this overrides the 'general' color setting */ 
       /* the margin is not overridden however */ 
}​ 

JS Fiddle demo.

Referencias:

• CSS Selectors (Level 3), at the W3.org.

Answer 2

¿Has probado CSS child-selectors?

ul { /* parent list styles here */ } 
ul > li > ul { /* child list styles here */ } 

Answer 3

Utilice el estilo ul li ul li {...} O

ul li ul {....} para dar diferentes a la lista secundaria. si está buscando el menú de navegación con el menú secundario.

Here es realmente un buen ejemplo de lo mismo.

Utiliza CSS3.