Javascript jQuery菜单效果出错

我正在寻找一种方法，使列表顺序导航中的子菜单褪色，因为我希望它褪色：

始终存在一个活动菜单项-如果活动菜单项位于子菜单中，则也存在一个活动菜单父菜单项。因此，在初始化时，具有活动当前项或当前父项的子菜单应该可见。如果我将鼠标悬停在其他菜单项上，其子菜单将淡入，活动菜单将淡出。离开整个菜单后，活动子菜单再次淡入。另外，我还使用了jQuery插件hoverIntent(http://cherne.net/brian/resources/jquery.hoverIntent.html)为每个悬停操作指定一个超时。

---

到目前为止，这是我得到的，但它真的很有问题。由于某些原因，子菜单有时会完全消失，而且当悬停两个项目而不离开导航时，两个子菜单会重叠。有人有什么想法或建议给我吗？=）请在此处查看演示：

而不是在

$（this.find（“ul”）.animate（{'opacity'：'1'}，250）中使用animate
我会在回调中使用fadeIn和fadeOut函数。然后确定淡出结束后开始淡出动画

element.fadeOut(250,function(){otherElement.fadeIn(250)})

CSS问题：最好不要使用
display:none
和
opacity
自己，将其保留到jQuery并使用适当的函数进行
fadeIn（）
和
fadeOut（）

而不是放置
显示：块；浮动：左
在菜单的
元素上，应使用
显示：内联块
。如果浮动
s，则会有效地将其从父容器中剥离，使ul的大小为零，因此，除非明确设置其大小，否则无法侦听
mouseleave
事件

代码问题：在hoverIntent插件中，
timeout
可能不是您想要的。超时在一定时间后自动触发
out
事件。要延迟悬停效果，请改用
灵敏度
和
间隔
。看看这本书

如果应用上述修复程序，则只需要hoverIntent的结束和主导航的mouseleave事件。
over
事件在当前子菜单中淡出，其余部分淡出；当用户将鼠标悬停在导航上时，
mouseleave
在活动子菜单中淡出。请看您修改后的JSFIDLE演示：

这类问题应该被自动标记为另一个正在创建的毫无意义的下拉菜单——谷歌有6770000个“jquery下拉菜单”的结果，而fiddle似乎不起作用
// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();

// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
    over: function(){
        // Find the hovered menu's sub-menu
        var $submenu = $(this).find('.sub-menu');

        // Stop the animation and fade out the other submenus
        $('.sub-menu').not($submenu).stop(true,true).fadeOut(260);

        // Fade in the current one
        $submenu.fadeIn(260);
    }
});

// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
    // Fade out all inactive submenus
    $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);

    // Fade in the active one
    $('.current-menu-parent .sub-menu').fadeIn(260);
});