Jquery 多级菜单未显示

我这里有一个多级子菜单的例子，但它没有显示，因为使用stop（）使第一个子菜单稳定。如何解决这个问题

$(document).ready(function () {
    $(".cat").mouseover(function () {
        $(".sub1").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });

    $(".cat").mouseout(function () {
        $(".sub1").slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".sub1").mouseover(function () {
        $(this).css("display", "block").stop();
    });

    $(".sub1").mouseout(function () {
        $(this).slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".item2").mouseover(function () {
        $(".sub2").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });
});

---

我已经清除了很多css错误和jQuery冲突。我终于设法解决了这件事

首先您不需要使用回调函数，该函数在

slideUp/slideDown

之后操作css

display:block/none

，因为这些方法在完成后自动

隐藏/显示$（this）

元素

Second:您应该选择用于触发nav的包装器元素。在您的示例中，您选择了小元素

.cat

，这是错误的。您应该选择包裹整个导航的最大ele。在您的示例中：

.menu

第三：别忘了定义

top:0；左：0当
位置
使用保护时。如果不定义上/左值，则会在某些浏览器上产生冲突

$(document).ready(function(){
    $('.menu').bind({
        mouseenter: function() {
            $(".sub1").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub1").slideUp(500);
        }
    });

    $('.item2').bind({
        mouseenter: function() {
            $(".sub2").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub2").slideUp(500);
        }
    });
});

感谢您的帮助，但菜单包含多个项目，不仅一个选中此项，我希望在将鼠标悬停在“类别”链接上时显示子菜单，而不是整个菜单，您需要创建一个包装触发器元素的元素，否则将创建冲突。检查这个：非常感谢你的帮助，我真的很感激