顯示右父UL菜單的子UL

Question

我有這個網站菜單：

 <ul id='main'> 
     <li class='active current' id='lighty'> 
      <a href='/'>Lighty</a> 
      <ul> 
      <li class='sub'> 
       <a href='/'>Hem</a> 

      </li> 
      </ul> 
     </li> 
     <li id='community'> 
      <a href='/community'>Community</a> 
     </li> 
     </ul> 

而且這個jQuery：

 $("#menu ul > li").mouseenter(function(){ 
     id = $(this).attr("id"); 
     $("#menu #main li").removeClass("active"); 
     $(this).addClass("active"); 
     }).mouseleave(function(){ 
     id = $(this).attr("id"); 
     menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000); 
     }); 

什麼，我想acomplish是，當我徘徊的一個li的主要ul應該顯示那個li的子ul。當我將鼠標移出li或兒童ul時，菜單應該可見2秒。 它通過主li按鈕工作，但如果在小孩ul上並移出它只是消失，它不會等待兩秒鐘。

等待兩秒鐘，你可以進入菜單，如果你不小心將鼠標移出它。

任何人都可以幫助我解決這個錯誤嗎？也許你有更好的解決方案？

這裏也是在菜單上看起來如何，如果它有助於截圖： screen shot under or click hereScreenshot http://img42.imageshack.us/img42/813/screenshotar.png

Answer 1

這是什麼意思？

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
<!-- 
$(function() { 
    $("ul#main > li").mouseenter(function(){ 
     $("#main li").removeClass("active"); 
     $(this).addClass("active"); 
    }).mouseleave(function(){ 
     setTimeout(function() 
     { 
      $("#main li").removeClass("active"); 
     }, 2000); 
    }); 
}); 
//--> 
</script> 
<style type="text/css"> 
    #main li ul { 
     display: none; 
    } 
    #main li.active ul { 
     display: inline; 
    } 
</style> 

<ul id="main"> 
    <li id="lighty"> 
     <a href="/">Lighty</a> 
     <ul> 
      <li class="sub"> 
       <a href="/">Hem</a> 
      </li> 
     </ul> 
    </li> 
    <li id="community"> 
     <a href="/community">Community</a> 
     <ul> 
      <li class="sub"> 
       <a href="/">more</a> 
       <a href="/">more1</a> 
       <a href="/">more2</a> 
       <a href="/">more4</a> 
      </li> 
     </ul> 
    </li> 
</ul>