Comment réparer ce menu déroulant JQuery?

Question

J'ai essayé de créer un menu déroulant dans JQuery, mais cela s'avère assez difficile.

Mon code est ici:

$(document).ready(function(){ 

     $('ul li').mouseover(function() 
     { 
       $(this).children("ul").show(); 
     }); 
     $('ul li ul').mouseover(function() 
     { 
       $('ul li ul').show(); 
     }).mouseout(function(){ 
       $('ul li ul').hide(); 
     }); 

    }); 

Fondamentalement, je veux planer au-dessus d'un élément de la liste et le sous ul de descendre, je peux passer la souris sur les éléments de liste et si la souris disparaît de la sous nav, le menu se cache à nouveau.

merci, Keith

MISE À JOUR: j'ai enlevé la frontière du CSS et il fonctionne très bien, il semble que le mouseout est déclenché lorsque je passe la souris sur la frontière 1px, tout à fait bizarre.

Answer 1

Connaissez-vous superfish? C'est un plugin de menu jQuery avec un excellent support cross-browser. Il n'a certainement pas le problème que vous rencontrez. Je n'ai pas vérifié le code source, mais la différence principale est qu'il ajoute un délai au mouseout. Cela signifie qu'une action n'est pas déclenchée, sauf si la position du curseur est stable pendant un certain temps (le retard par défaut est de 800ms). Cela résoudra votre problème et est également une bonne chose à mettre en œuvre, car il rendra votre menu plus convivial.

Answer 2

vous devez utiliser jQuery's hover() function car il évite tous les problèmes spécifiques sorta navigateur ..

Sans un coup de test j'imagine le code ressemblerait à quelque chose comme plus:

$('.clearfix li').hover(function() { 
      $('ul', this).show(); 
     }, function() { 
      $('ul', this).hide(); 
     }); 

Answer 3

Le problème est que la bordure est "à l'extérieur" de la boîte. Cela aide si vous déplacez simplement le menu déroulant de 1 pixel de sorte qu'il chevauche la barre de menu de ce 1 pixel.

changer simplement la position en haut du menu déroulant dans votre CSS de 30px à 29px comme ça:

 ul li ul { 
      border: none; 
      position: absolute; 
      top: 29px; /* <-- was 30px */ 

Answer 4

Il fonctionne très bien sur ma version de Firefox 1.5.0.1 Peut-être que vous ne disposez pas de la dernière version . Je dirige moi-même une galerie d'images, mais je ne pense pas que le type de mise en page puisse fonctionner très bien pour moi car j'ai des descriptions pour mes images et certaines images sont assez grandes. Je ne sais pas, cela pourrait valoir la peine d'être expérimenté.