在列表项之间移动时，jQuery菜单断开

我已经创建了一个带有下拉菜单的自定义jQuery水平菜单。最初，当鼠标悬停在列表项上时，它只是将一个子菜单淡入，而在移开时淡出

然而，我想创造一种效果，如果你将鼠标移出子菜单，它不会立即消失（例如，如果你将鼠标超调了一个像素）。在前面的一个问题中，我知道了hoverIntent插件，但是在打开兄弟菜单时，它有一个恼人的延迟。所以我从零开始考虑自己的功能

我的HTML是一个标准的嵌套列表，ul#menu>li>ul>li。我的Javascript如下所示：

var menuVisible = false;
var cancelTimeout = false;

$(document).ready(function(){
  $('ul#menu > li').hover(
    function(){
      menuMouseOver( $(this) );
    },
    function(){
      menuMouseOut( $(this) );
    }  
  );
});

function menuMouseOver( $li )
{
  // if one of the menus is down, check which one we're hovering
  if ( menuVisible ) {
    cancelTimeout = true;  
    if ( $li.find('>ul').css('display') == 'block' ) {
      // do nothing if we're hovering over current menu
    }
    else {
      // turn off all menus
      $li.parent().find('>li').each( function() {
        menuOff( $li )
      });
    }
  }

  menuOn( $li );
  menuVisible = true;
}

function menuMouseOut( $li )
{
  setTimeout( 
    function(){
      if ( !cancelTimeout ) {
        menuOff( $li );
        menuVisible = false;
      }
      cancelTimeout = false;
    },
    2000
  );

}

function menuOn( $li )
{
  $li.css('background-position', 'left bottom');
  $li.find('>ul').fadeIn('fast');
}
function menuOff( $li )
{
  $li.css('background-position', 'left top');
  $li.find('>ul').fadeOut('fast');
}

以下几点是有效的：

• 在顶级

  li

  上移动会打开子菜单
• 离开子菜单2秒后将关闭它（出于测试目的；在最终版本中将减少）
• 离开子菜单并返回将取消超时，从而阻止菜单消失

但是，这些都不起作用：

• 从一个顶级列表项移动到下一个顶级列表项时，上一个子菜单不会消失。我希望它立即淡出，没有正常的延迟
• 如果我在两个顶级列表项之间移动，

  menuVisible

  设置为

  false

  ，这会使系统出错。这是因为移动到第一个同级时，

  cancelTimeout

  设置为true，而移动到第二个同级时仍然为true

如果您能深入了解为什么会发生这种情况，当然还有如何修复它，我将不胜感激。

您是否尝试过菜单jQuery插件

---

我已经在我的项目中使用了它，我认为它会为您解决这些问题。

@fudgey:这根本不是我想要的。移动鼠标时，菜单将立即消失。我已经在5分钟内完成了这项工作（我的意思是jQuery非常简单）。我通常是一个有多余功能的插件的坚持者，但Superfish是非常小的，即使有阴影和其他毫无意义的废话。@DisgludedCoat:酷，我很高兴我能帮上忙。我注意到已经一周没有更好的答案了。也许你可以接受这个答案来帮助那些可能正在寻找没有被接受答案的问题的人。“9月22日23:50被接受”-也许你也错过了绿色背景色？