jQuery - ドロップダウンメニュー

Question

こんにちは
私は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要素にバインドすると、マウスオーバーですべての子要素がカウントされます（ドロップダウンメニューも同様です）。