jQuery Menu déroulant de navigation

Question

J'ai un petit problème avec un menu de navigation déroulant.

Lorsque vous passez la souris sur un élément avec un sous-menu, l'état du survol se déclenche et le sous-menu s'abaisse correctement. Mais une fois que vous passez la souris dans le sous-menu, l'élément de menu d'origine revient de sa couleur de fond de survol à l'état d'origine.

Y a-t-il un moyen de conserver l'état du survol en arrière-plan en entrant dans le sous-menu? Pour compliquer, chaque élément de menu avec un sous-menu est également une couleur différente.

HTML:

<nav id="topNav"> 
     <ul> 
      <li><a href="#" title="About">About</a></li> 
      <li id="learn"><a href="#" title="Learn">Learn</a> 
       <ul> 
        <li><a href="#" title="News">News</a></li> 
        <li><a href="#" title="Research">Research</a></li> 
        <li><a href="#" title="Simulcasts">Simulcasts</a></li> 
        <li><a href="#" title="Fellowships">Fellowships</a></li> 
        <li><a href="#" title="Internships">Internships</a></li> 
       </ul> 
      </li> 
      <li id="connect"><a href="#" title="Connect">Connect</a> 
       <ul> 
        <li><a href="#" title="News">News</a></li> 
        <li><a href="#" title="Research">Research</a></li> 
        <li><a href="#" title="Simulcasts">Simulcasts</a></li> 
        <li><a href="#" title="Fellowships">Fellowships</a></li> 
        <li><a href="#" title="Internships">Internships</a></li> 
       </ul> 
      </li> 
      <li id="invest"><a href="#" title="Invest">Invest</a> 
       <ul> 
        <li><a href="#" title="News">News</a></li> 
        <li><a href="#" title="Research">Research</a></li> 
        <li><a href="#" title="Simulcasts">Simulcasts</a></li> 
        <li><a href="#" title="Fellowships">Fellowships</a></li> 
        <li><a href="#" title="Internships">Internships</a></li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 

JS:

(function($){ 

$(document).ready(function() { 
    //cache nav 
    var nav = $("#topNav"); 

    //add hover animations to submenu parents 
    nav.find("li").each(function() { 
     if ($(this).find("ul").length > 0) { 

      //show subnav on hover 
      $(this).mouseenter(function() { 
       $(this).find("ul").stop(true, true).slideDown(200);    
      }); 

      //hide submenus on exit 
      $(this).mouseleave(function() { 
       $(this).find("ul").stop(true, true).slideUp(50); 
      }); 
     } 
    }); 
}); 

CSS:

nav { display:block; position:relative; z-index: 600; 
nav ul { padding:0; margin:0; } 
nav li { position:relative; float:left; list-style-type:none; } 
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
nav li a { display:block; width: 68px; padding: 18px 35px 53px 9px; color:#fff; border-right: 1px solid #D0D2D3; text-decoration:none; } 
nav li a:focus { outline:none; text-decoration:underline; } 
nav a span { display:block; float:rightright; } 
nav a:hover { background-color: #e5e6e7; color: #4D4D4D; } 
nav ul ul { display:none; position:absolute; left:0; } 
nav ul ul li { float:none; } 
nav ul ul a { width: 199px; padding:13px; border-right:none; border-bottom: 1px solid #fff; } 
nav ul li:nth-child(2) { background-image: url('../images/nav-turquoise.png'); background-repeat: no-repeat; background-position: top right; } 
nav ul li:nth-child(3) { background-image: url('../images/nav-purple.png'); background-repeat: no-repeat; background-position: top right; } 
nav ul li:nth-child(4) { background-image: url('../images/nav-orange.png'); background-repeat: no-repeat; background-position: top right; } 
nav ul li:nth-child(2) a:hover { background-color: #14C7C4; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; } 
nav ul li:nth-child(3) a:hover { background-color: #A36CC8; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; } 
nav ul li:nth-child(4) a:hover { background-color: #FBB600; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; } 
#learn ul li { background-color: #14C7C4; background-image: none; } 
#connect ul li { background-color: #A36CC8; background-image: none; } 
#invest ul li { background-color: #FBB600; background-image: none; } 
#learn ul li a:hover { background-color: #27a3a4; color: #fff; background-image: none; } 
#connect ul li a:hover { background-color: #865e97; color: #fff; background-image: none; } 
#invest ul li a:hover { background-color: #d39b13; color: #fff; background-image: none; } 

Answer 1

J'applique mes :hover styles au li au lieu du a. Techniquement, comme votre menu contient des éléments de liste imbriqués, en survolant les éléments de sous-menu, vous passez toujours le curseur sur le parent li et, par conséquent, le style va coller.

Espérons que ça aide