Jqueryドロップダウンメニュー - 親タブをアクティブにしますか？

Question

JQueryを使用して単純なドロップダウンメニューを作成しましたが、サブメニュー/親タブからマウスを移動するまで親タブをアクティブに保つ方法はありますか？

 $('#main-nav a').bind('mouseover', function() 
     { 
      $(this).parents('li').children('ul').show(); 

      if($(this).parents('li').children('ul').size() > 0) 
      { 
        $(this).parents('li:first').addClass('hover'); 
      } 
     }); 

     $('#main-nav a').bind('mouseout', function() 
     { 
      $(this).parents('li').children('ul').hide(); 

     }); 

HTML：

<div id="main-nav" class="border clearfix"> 
      <ul> 
        <li class="current"><a href=""><span>Home</span></a></li> 
        <li><a href=""><span>Portfolio</span></a></li> 
        <li> 
         <a href=""><span>About Us</span></a> 
         <ul class="clearfix sub-menu"> 
           <li><a href="">Sub Navigation Tab</a></li> 
           <li><a href="">Sub Navigation Tab</a></li> 
           <li><a href="">Sub Navigation Tab</a></li> 
           <li> 
            <a href="">About Us</a> 
            <ul class="clearfix"> 
              <li><a href="">Tabby</a></li> 
            </ul> 
           </li> 
         </ul> 
        </li> 
        <li><a href=""><span>Contact</span></a></li> 
        <li><a href=""><span>Blog</span></a></li> 
      </ul> 
     </div> 

Answer 1

あなたが代わりに李のAの李上のホバーをバインドする必要があります。

子供もリの中にいるので、それでもアクティブになります。

jsfiddle @私の単純な例をご覧ください：http://jsfiddle.net/tUYfw/