So ändern Sie die Ankerfarbe, wenn Sie den Mauszeiger über eine Liste bewegen

Question

Ich habe folgende HTML und CSS.

Wenn ich den Mauszeiger über eine Liste halte, möchte ich die Hintergrundfarbe und die Schriftfarbe ändern. Allerdings ändert sich mein Stil nicht, wenn ich den Mauszeiger über das Auffüllen der Liste, am Rand oder in der Nähe eines Rahmens in der Liste halte.

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

Wie kann ich es tun?

#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

Versuch folgende:

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

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

Answer 2

könnte es seltsam erscheinen, aber versuchen #nav li a zu platzieren: Hover-Stil vor #nav li eine