帶有「隱藏延遲」的jQuery導航

Question

我創建了以下導航（可在我的目標和問題描述下方找到源）。

目標

我想有一個最終的結果是：只要您懸停導航點subnvaigation被顯示。當您更改導航點時，所有其他主導航（包括子導航）點應該直接隱藏，但是當您離開完整導航時，應該有一些延遲幾秒鐘，然後才能隱藏。

問題

，當我瀏覽過的第一個點「家」子導航點的「新聞」中顯示出來。只要我離開「家」，就會有250毫秒的延遲，直到「新聞」消失，到目前爲止這麼好。

現在，如果我嘗試將鼠標移動到子導航點「新聞」，它將隱藏在第二次離開第一個導航點「主頁」時。

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）： 這裏SA的jsfiddle與期望的結果 http://jsfiddle.net/7PFDv/

我在你的CSS添加的唯一的事情就是深色背景（以便導航可見）以及以下

ul#dropdown ul 
{ 
    display: none; 
} 

我編輯過的jQuery以下

$('#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 

});