CSS bouton de survol bug

Question

Je suis en train de créer un bouton déroulant et il fonctionne presque sauf un petit bug. J'ai plusieurs gros boutons qui changent la couleur d'arrière-plan quand l'utilisateur les survole et l'un d'entre eux, le bouton de langue, affiche plusieurs sous-options à l'intérieur de lui-même quand l'utilisateur survole dessus. Tout fonctionne bien, sauf que le bouton de langue ne change pas sa couleur d'arrière-plan lorsque l'utilisateur passe la souris dessus. Il change sa couleur si le curseur est juste à l'intérieur du bouton mais pas s'il touche les 3 sous-options. Ce dont j'ai besoin, c'est d'une technique ou d'une règle qui stipule que le bouton changera la couleur d'arrière-plan si l'utilisateur passe la souris dessus ou si l'utilisateur survole l'un de ses éléments enfants. Comment puis-je y parvenir? Voici le balisage:

<ul> 
          <li><a href="/home/" title="Go to the Home page" class="current"><span>Home</span></a></li> 
          <li><a href="/about-us/" title="Go to the About Us page" class="link"><span>About us</span></a></li> 
          <li><a href="/products/" title="Go to the Products page" class="link"><span>Products</span></a></li> 
          <li><a href="/services/" title="Go to the Services page" class="link"><span>Services</span></a></li> 
          <li><a href="/news/" title="Go to the News page" class="link"><span>News</span></a></li> 
          <li><a href="/dealers/" title="Go to the Dealers page" class="link"><span>Dealers</span></a></li> 
          <li id="Rollover"><a href="" title="select language" class="link"><span>Language</span></a> 
           <ul> 
            <li><a href="/english/">English</a></li> 
            <li><a href="/french/">French</a></li> 
            <li><a href="/spanish/">Spanish</a></li> 
           </ul> 
          </li> 
          <li><a href="/contact-us/" title="Go to the contacts page" class="link"><span>Contact us</span></a></li> 
         </ul> 

Merci d'avance!

Answer 1

Si votre règle de survol est sur la balise <a>, cela ne fonctionnera pas car les sous-options ne sont pas réellement des enfants de l'ancre, elles sont des enfants de #Rollover. Cela devrait fonctionner:

#Rollover:hover{background-color:<your color here>} 

Answer 2

Vous pourriez essayer d'utiliser un petit javascript pour ajouter une classe lorsque le survol est survolé. Si vous utilisez une bibliothèque de scripts comme jQuery ce serait quelque chose comme ceci:

$('#rollover').hover(function(){ 
     $(this).addClass('hover'); 
     },function(){ 
     $(this).removeClass('hover'); 
     }); 
$('#rollover a').hover(function(){ 
     $(this).parent("#rollover").addClass('hover'); 
     },function(){ 
     $(this).parent("#rollover").removeClass('hover'); 
     }); 

ce code est non testé de sorte qu'il pourrait avoir besoin d'un coup sec ou deux, mais cela devrait aussi corriger les bugs CSS qui viennent dans IE (en supposant que vous utilisez un menu de type suckerfish)