jQuery超级菜单幻灯片效果

当前，下面我的jQuery代码在其父菜单悬停时打开和关闭子菜单。但我唯一的问题是，当我将鼠标移到另一个顶级项目上时，打开的子菜单开始关闭，我现在悬停的项目的子菜单开始向下滑动，因此有两个子菜单部分打开

我如何才能做到只有在前一个子菜单关闭后才能打开新子菜单？理想情况下，我想要的效果是

---

有没有办法像关闭链接的插件一样关闭

.sub菜单

？你的例子似乎马上就结束了

$('.main-menu > ul > li').hover(function () {
        $(this).find('.sub-menu').slideDown('slow');
    }, function () {
        $(this).find('.sub-menu').stop(true, true).slideUp('slow');
    });

var sub_menu = $('.main-menu .sub-menu');//select all sub menus
$('.main-menu > ul > li').hover(function () {
    sub_menu.stop(true, true); //use stop on all submenus
    $(this).find('.sub-menu').slideDown('slow');
}, function () {
    sub_menu.stop(true, true);//use stop on all submenus
    $(this).find('.sub-menu').slideUp('slow');
});