如何在悬停下一个li类时保持jquery下拉悬停内容打开

我从一个网站上传了一个jquery下拉菜单，我想知道这是否可行，如果可行，如何实现？ 当前，当您将鼠标悬停在3个主要li类中的任何一个上时，会在每个下展开一个下拉菜单，然后如果您将鼠标悬停在打开的div上或悬停到另一个li类上，则菜单将关闭并显示新内容。我想让它这样，一旦你悬停并打开其中任何一个，然后如果你的鼠标在下一个上，整个容器不会收缩，而是调整为新的li的新内容。我想要的例子是 菜单，当您的鼠标位于导航区域时，最后一个拖放内容将保留，如果您将鼠标悬停在新菜单项上，菜单不会折叠，它会根据新内容自行调整

我在这里在JSFIDLE上设置了一个演示测试

---

我想出了一个解决方案：

您可能需要添加一些动画。此外，如果您使用绝对定位，您可以使下拉菜单与导航栏的宽度相同

当然，我们基本上只是重写了插件的下拉逻辑。在某种程度上，它只是成为您自己的自定义菜单代码

$(function(){

    $('#navigation_horiz').naviDropDown({
        dropDownWidth: '300px'
    });

    $('#navigation_vert').naviDropDown({
        dropDownWidth: '300px',
        orientation: 'vertical'
    });

    var olddropdown = null;

    $("#navigation_horiz>ul>li").unbind('mouseout');
    $("#navigation_horiz>ul>li").unbind('mouseover');
    $("#navigation_horiz>ul>li").bind("mouseout", function(event) {
         olddropdown = $(this).find(".dropdown");
    });
    $("#navigation_horiz>ul>li").bind("mouseover", function(event) {
        $(this).find(".dropdown").css('display', 'block');
        if (olddropdown != null) {
            olddropdown.css('display', 'none');
            olddropdown = null;
        }
    });
    $("#navigation_horiz>ul").bind("mouseout", function(event) {
        olddropdown.css('display', 'none');
        olddropdown = null;
    });
});

---

有人对如何实现这一目标有什么想法吗？谢谢

$(function(){

    $('#navigation_horiz').naviDropDown({
        dropDownWidth: '300px'
    });

    $('#navigation_vert').naviDropDown({
        dropDownWidth: '300px',
        orientation: 'vertical'
    });

    var olddropdown = null;

    $("#navigation_horiz>ul>li").unbind('mouseout');
    $("#navigation_horiz>ul>li").unbind('mouseover');
    $("#navigation_horiz>ul>li").bind("mouseout", function(event) {
         olddropdown = $(this).find(".dropdown");
    });
    $("#navigation_horiz>ul>li").bind("mouseover", function(event) {
        $(this).find(".dropdown").css('display', 'block');
        if (olddropdown != null) {
            olddropdown.css('display', 'none');
            olddropdown = null;
        }
    });
    $("#navigation_horiz>ul").bind("mouseout", function(event) {
        olddropdown.css('display', 'none');
        olddropdown = null;
    });
});