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 上而不是 li 中的 a 上。

因为孩子们也在里，所以仍然会活跃。

看看我的简单示例@jsfiddle： http://jsfiddle.net/tUYfw/