Comment changer la couleur de l'ancre lorsque vous passez la souris sur une liste

Question

J'ai un HTML et CSS suivants.

Lorsque je survole une liste, je souhaite changer la couleur d'arrière-plan et la couleur de la police. Cependant, mon style ne change pas lorsque je survole le remplissage de la liste, sur la bordure ou près d'une bordure dans la liste.

http://jsfiddle.net/Hbf9D/1/

Comment puis-je faire?

#nav li{ 
    display: inline; 
    text-align: center; 
    list-style-type:none; 
    background-color:#1A365B; 
    margin: 0 6px 0 0; 
    padding: 2px 11px 4px 11px; 

    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
} 

#nav li:hover{ 
    background-color:#E0F1EA; 
    border: 2px solid #000; 
    color: #000000; 
    padding: 0 9px 2px 9px; 
} 

#nav li a:hover{ 
    color: #000000; 
} 

#nav li a{ 
    text-decoration: none; 
    color: #ffffff; 
    font-weight:bold; 
    font-family: 'CantarellBold', Arial, sans-serif; 
    text-transform: capitalize; 
    font-size: 12px; 
} 

<ul id="nav" class="grid_16"> 
    <li><a href="#">FORSIDE</a></li> 
    <li><a href="#">MOBIL</a></li> 
    <li><a href="#">PC OG SERVERE</a></li> 
    <li><a href="#">TJENESTER</a></li> 
</ul> 

Answer 1

essayer suivante:

#nav li:hover a{ 
    color: #000000; 
} 

http://jsfiddle.net/zainshaikh/Hbf9D/3/

Answer 2

il pourrait sembler étrange, mais essayez de placer #nav li a: hover style avant #nav li un