このJQueryドロップダウンメニューを修正するには？

Question

JQueryでドロップダウンメニューを作成しようとしましたが、それはかなり困難です。

私のコードはここにある：

$(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(); 
     }); 

    }); 

基本的に私は、私は、リストの項目の上にカーソルを置くことができ、マウスがサブのオフになった場合、ドロップダウンするリスト項目とサブULの上にマウスを移動したいですnavを押すと、メニューは再び非表示になります。

おかげで、 キース

UPDATE：私はCSSから境界線を削除し、それが正常に動作しますので、私が1ピクセルの境界線にカーソルを合わせるとマウスアウトがトリガされ表示され、非常に奇妙な。私は、コードが何かを見て想像したいテストのなめるなければ、それはすべてのみかんのブラウザ固有の問題を回避して、あなたがjQuery's hover() functionを使用する必要があります

Answer 1

はのあなたが知っていsuperfish？優れたクロスブラウザサポートを備えたメニューjQueryプラグインです。あなたが経験している問題は間違いありません。私はソースコードをチェックしていませんが、主な相違は、それがmouseoutの遅延を追加することです。これは、カーソルの位置がしばらく安定していない限り（デフォルトの遅延は800ms）、アクションがトリガされないことを意味します。これはあなたの問題を解決し、メニューをより使いやすくするために実装するのも良いことです。

Answer 2

..

以上のように：

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

Answer 3

問題は、ボーダーがボックスの外側にあることです。ドロップダウンメニューを1ピクセルだけ上に移動すると、その1ピクセルだけメニューバーと重なるようになります。

単にそのよう29px 30pxするから、あなたのCSSのドロップダウンメニューの一番上の位置を変更します。

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

Answer 4

それはおそらく、あなたが最新バージョンを持っていないのFirefox 1.5.0.1の私のバージョンで正常に動作します。私はイメージギャラリーを自分で運営していますが、イメージの記述があり、イメージの一部がかなり大きいので、レイアウトのタイプがアートでうまくいくとは思いません。私は知らない、実験する価値があるかもしれない。