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, мышь будет рассчитывать на все его дочерние элементы (так же, как и выпадающее меню).