Quel est le problème avec ma navigation JQuery?

Question

Actuellement, j'ai un menu déroulant configuration du menu pour mon site comme suit:

HTML:

<ul class="primary-navigation"> 
    <li><a href="/About" id="about"><span>About</span></a></li> 
    <li><a href="/Location" id="location"><span>Location</span></a></li> 
    <li><a href="/Site-Plan"><span>Site Plan</span></a></li> 
    <li><a href="/Specification"><span>Specification</span></a></li> 
    <li><a href="/Gallery"><span>Gallery</span></a></li> 
    <li><a href="/Investors"><span>Investors</span></a></li> 
    <li class="last"><a href="/Contact"><span>Contact</span></a></li> 
</ul> 
<ul class="secondary-navigation" id="about-menu"> 
    <li><a href="/Item1">Item1</a></li> 
    <li><a href="/Item2">Item2</a></li> 
</ul> 
<ul class="secondary-navigation" id="location-menu"> 
    <li><a href="/Item1">Amenities</a></li> 
    <li><a href="/Item2">Connections</a></li> 
    <li><a href="/Item3>Location Map</a></li> 
</ul>  

Javascript:

$(document).ready(function() { 
    // About 
    $("#about").hover(
     function() { 
      $("#about-menu").css("display","block"); 
     }, 
     function() { 
      $("#about-menu").css("display","none"); 
     } 
    ); 
    $("#about-menu").hover(
     function() { 
      $(this).css("display", "block"); 
     }, 
     function() { 
      $(this).css("display", "none"); 
     } 
    ); 
    $("#about-menu li").hover(
     function() { 
      $("#about-menu").css("display", "block"); 
     }, 
     function() { 
      $("#about-menu").css("display", "none"); 
     } 
    ); 
    // Location 
    $("#location").hover(
     function() { 
      $("#location-menu").css("display", "block"); 
     }, 
     function() { 
      $("#location-menu").css("display", "none"); 
     } 
    ); 
    $("#location-menu").hover(
     function() { 
      $(this).css("display", "block"); 
     }, 
     function() { 
      $(this).css("display", "none"); 
     } 
    ); 
}); 

CSS:

#header ul.primary-navigation { width: 735px; height: 90px; overflow: auto; position:   absolute; top: 0px; right: 0px; background: #FFFFFF; } 
#header ul.primary-navigation li { list-style-type: none; width: 104px; height: 89px; float: left; position: relative; border-right: 1px solid #FFFFFF; background: #b3b3b3; } 
#header ul.primary-navigation li:hover { background: #adcc52; } 
#header ul.primary-navigation li.last { border-right: 1px solid #b3b3b3; } 
#header ul.primary-navigation li.last:hover { background: #adcc52; border-right: 1px solid #adcc52; } 
#header ul.primary-navigation li a { display: block; width: 104px; height: 89px; text-decoration: none; } 
#header ul.primary-navigation li a span { color: #FFFFFF; display: block; position: absolute; left: 10px; bottom: 10px; } 

#header ul.secondary-navigation { width: 735px; display: none; position: absolute; top: 89px; left: 225px; background: red; overflow: auto; } 
#header ul.secondary-navigation li { width: 735px; height: 30px; position: relative; float: left; /*background: #adcc52;*/ } 

La navigation apparaît travailler au début. Cependant, il semble que chaque fois qu'un sous-menu est actif, si vous essayez de survoler quoi que ce soit après le premier élément <li>, le sous-nav disparaît. Je ne peux pas pour la vie de moi comprendre pourquoi cela se passe! Vous penseriez que parce que les articles <li> sont imbriqués dans un parent <ul>, qu'ils seraient tous affichés jusqu'à ce que vous vous déplacez le <ul> mais cela ne semble pas fonctionner de cette façon.

Est-ce que quelqu'un sait pourquoi cela se produit?

Merci!

Answer 1

Je dirais que dans

$("#about-menu li").hover(
    function() { 
     $("#about-menu").css("display", "block"); 
    }, 
    function() { 
     $("#about-menu").css("display", "none"); 
    } 
); 

Lorsque vous quittez une LI, le deuxième rappel est appelée et le menu entier disparaît. D'autres LI ne sont pas affichés et ne peuvent pas déclencher le menu pour qu'il s'affiche à nouveau. Vous devez supprimer ce rappel.

Une autre astuce, au lieu de css("display..., il suffit d'utiliser .show() et .hide()