Раскрывающееся меню 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

Вы должны связать курсор мыши на li вместо a в li.

Поскольку дети также находятся в li, он все еще будет активен.

Посмотрите мой простой пример@ jsfiddle: http://jsfiddle.net/tUYfw/