jQuery - 延遲下拉菜單

Question

嗨
我有3個菜單，其中一個包含3個子菜單，當我將鼠標懸停在子菜單的父級上時，它會展開div元素，但是，當我將鼠標懸停在子菜單上時，菜單中，擴展的div元素不能被保存，我該如何解決它？謝謝

<div id="wrap"> 
    <div id="menu"> 
     <ul> 
      <li><a href="#">Item A</a></li> 
      <li><a class="sub" href="#">Item B</a> 
       <ul> 
        <li><a href="#">Item B1</a></li> 
        <li><a href="#">Item B2</a></li> 
        <li><a href="#">Item B3</a></li> 
       </ul>   
      </li> 
      <li><a href="#">Item C</a></li> 
     </ul> 
    </div> 
</div> 

$(function(){ 
    $('#menu > ul > li > a.sub').hover(
     function() { 
      $('div#wrap').animate({'height': '200px'}); 
     }, 

     function() { 
      $('div#wrap').animate({'height': '100px'}); 
     } 
    ); 
); 

Answer 1

爲什麼你綁定到a元素。如果綁定到li元素，則鼠標懸停將計入其所有子元素（所以還包括下拉菜單）。