CSS Le lien du menu reste surligné

Question

Alors j'essaie mes mains dans un menu css et j'ai un bug simple que je ne peux pas réparer et que je n'ai trouvé aucune aide pour le chercher. Le problème est que lorsque je survole un menu déroulant, le lien parent reste surligné et le texte revient à la couleur d'origine. J'espère que cela l'explique. Voici le code CSS, je suis sûr qu'il s'agit d'ajouter quelque chose ou de corriger une ligne de code. Vous pouvez vérifier le numéro here, tout fonctionne bien jusqu'à ce que vous visitez un sous-menu (comme dans BAR ou Info).

#nav, #nav ul { 
    text-align: center; 
    text-size:16px; 
    float: left; 
    width: 750px; 
    height: 20px; 
    list-style: none; 
    line-height: 1; 
    background: white; 
    padding: 0; 
    border: solid #000; 
    border-width: 0px; 
    border-bottom-width: 1px; 
    margin: 0; 
    background-image: url('/images/bg.gif'); 
} 

#nav a { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #0000FF; 
    text-decoration: none; 
} 

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
} 

#nav li { 
    float: left; 
    padding: 0; 
    width: 75px; 
} 

#nav li ul { /*sub menu */ 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 75px; 
    border: solid #000; 
    border-width: 0px; 
    border-bottom-width: 1px; 
    border-top-width: 1px; 
    background-image: url('/images/submenu_bg.png'); 
} 

#nav li li { 
    width: 75px; 
} 

#nav li ul a { 
    width: 75px; 
} 

#nav li ul ul { 
    margin: -1.75em 0 0 14em; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
    left: auto; 
} 

#nav li:hover, #nav li.sfhover { 
    height: 20px; 
    background: #0000FF; 
} 

Answer 1

vous réglez la couleur du texte sur #nav a:hover, mais la couleur de fond sur #nav li:hover. Parce que vos sous-menus sont contenus dans le li, il compte toujours comme survolé même lorsque le curseur est dans le sous-menu. Les sous-menus ne sont pas contenus dans le lien, ils ne restent donc pas en surbrillance et retournent à leur couleur normale. Si vous souhaitez que l'élément de menu cesse de mettre en surbrillance, déplacez la propriété background à #nav a:hover à la place.

Avant:

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
} 

#nav li:hover, #nav li.sfhover { 
    height: 20px; 
    background: #0000FF; 
} 

Après:

#nav a:hover, #nav li.sfhover a { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
    background: #0000FF; 
} 

Sinon, si vous voulez que le menu pour séjour mis en évidence tout en planant sur le sous-menu (qui semble mieux, l'OMI), déplacer color à le li:hover. Je sais que c'est un peu bavard, mais ça marche. :-)

Avant:

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
    color: #FFF; 
} 

#nav li:hover, #nav li.sfhover { 
    height: 20px; 
    background: #0000FF; 
} 

Après:

#nav a:hover { 
    display: block; 
    width: 75px; 
    height: 20px; 
} 

#nav li:hover a, #nav li.sfhover a { 
    color:white; 
} 

#nav li:hover li a, #nav li.sfhover li a { 
    color:blue; 
} 

#nav li:hover li a:hover, #nav li.sfhover li a:hover { 
    color:white; 
} 

#nav li:hover, #nav li.sfhover { 
    color: #FFF; 
    height: 20px; 
    background: #0000FF; 
} 

Answer 2

Vous pouvez essayer de régler la couleur du lien sur le vol stationnaire du li, comme ceci:

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

#nav li:hover li a 
{ 
    color: #0000FF; 
}