「遅延を隠す」jQueryナビゲーション

Question

私は以下のナビゲーションを作成しました（ソースは私のターゲットと問題の説明の下にあります）。

最終的な結果があるように私はしたいのですがどのようなターゲット

：できるだけ早くあなたがsubnvaigationが表示されているナビゲーションポイントを置くよう。ナビゲーションポイントを変更すると、他のすべてのメインナビゲーション（サブナビゲーションを含む）ポイントは直接非表示になりますが、完全なナビゲーションを終了すると、すべてが隠れる前に数秒の遅延が発生します。

問題

私は最初のポイント「ホーム」の上に移動するとサブナビゲーションポイント「ニュース」まで見せています。 「ホーム」を離れるとすぐに、「ニュース」が消えるまで、250msの遅れがあります。

ここで、サブナビポイント「ニュース」にマウスを移動しようとすると、最初のナビゲーションポイント「ホーム」から離れると2番目に隠れてしまいます。

HTML

<div id="menu"> 
     <ul id="dropdown"> 
      <li> 
        <a href="#">Home</a> 
        <ul> 
         <li><a href="#">News</a></li> 
        </ul> 
      </li> 
      <li> 
        <a href="#">Navlevel 1</a> 
        <ul> 
         <li><a href="#">Navlevel 2</a></li> 
         <li> 
           <a href="#">Navlevel 2</a> 
           <ul> 
            <li><a href="#">Navlevel 3</a></li> 
            <li><a href="#">Navlevel 3</a></li> 
            <li><a href="#">Navlevel 3</a></li> 
           </ul> 
         </li> 
        </ul> 
      </li> 
     </ul> 
</div> 

CSS

/* NAVIGATION ELEMENTS */ 
ul#dropdown 
{ 
    margin: 0; 
    list-style: none; 
    color: #FFFFFF; 
} 

ul#dropdown ul 
{ 
    margin: 0; 
    list-style: none; 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    border: 1px solid #000000; 
} 

ul#dropdown ul ul,ul#dropdown ul ul ul 
{ 
    top: -1px; 
    left: 100%; 
    border: 1px solid #000000; 
} 

ul#dropdown li 
{ 
    float: left; 
    display: inline; 
    position: relative; 
    width: 165px; 
    border-right: 1px solid #ffffff; 
    line-height: 50px; 
} 

ul#dropdown ul li 
{ 
    width: 100%; 
    display: block; 
    background-color: #e1e6e8; 
    border: 0; 
    height: 30px; 
    line-height: 30px; 
} 

/* Root Menu */ 
ul#dropdown a 
{ 
    float: left; 
    display: block; 
    color: #ffffff; 
    text-decoration: none; 
    width: 100%; 
    text-align: center; 
} 

ul#dropdown li:hover a:hover 
{ 
    font-weight: bold; 
} 


/* 2nd Menu */ 
ul#dropdown li:hover li a 
{ 
    float: none; 
    color: #ffffff; 
    text-align: left; 
    width: 153px; 
    padding-left: 10px; 
    color: #000000; 
} 

/* 2nd Menu Hover Persistence */ 
ul#dropdown li:hover li a:hover 
{ 
    background-color: #aab6bb; 
} 
/* END NAVIGATION ELEMENTS */ 

jQueryの

$('#dropdown li').mouseenter(function() { 
     $('#dropdown li').not(this).children('ul').hide(); // Hide other child lists 
     $(this).children('ul').show(); // Show this one 
}); 
$('#dropdown').mouseleave(function() { 
     var lists = $('li ul', this); 
     setTimeout(function() { 
      lists.hide(); // Hide all lists 
     }, 250); // After 1/4 second 
}); 

私は、誰かがそこにあると思いますその問題に私を助けることができます。追加情報が必要な場合はお知らせください。

どうもありがとう、 ロルフ

Answer 1

更新（コードだけでなく、jsfiddle URL）：望ましい結果 http://jsfiddle.net/7PFDv/

とここ のsa jsfiddle私はあなたのCSSに追加唯一のものでした暗い背景（ナビゲーションが見えるように）とそれに続くもの

そして、私はあなたがjsfiddleのコードを貼り付け、彼らは見ることができ、簡単なリンクをユーザーに提供することができ、次の

$('#dropdown li').mouseenter(function() { 

     $(this).children('ul').show(); // Show this one 
}); 

$('#dropdown>li').mouseleave(function() { 

     //$(this).children('ul').hide(); // Show this one 
    var lists = $(this).find('ul'); 
     setTimeout(function() { 
      lists.hide(); // Hide all lists 
     }, 250); // After 1/4 second 

}); 

$('#dropdown>li li').mouseleave(function() { 

     $(this).children('ul').hide(); // hide this one 

});