Jquery 带有悬停问题的子菜单导航

我有三个级别的导航菜单：始终可见的主菜单、子菜单和子菜单

子菜单和子菜单应仅在悬停时显示。我正在将hoverint jquery插件用于以下配置：

jQuery(function() {

    var mainmenu_cfg = {
        interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
    };

    function openSubmenu() {
        $("ul#submenu").css('visibility', 'visible');
    }
    function closeSubmenu() {
        $("ul#submenu").css('visibility', 'hidden');
    }

    var submenu_cfg = {
        over: openSubsubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubsubmenu 
    }



    function openSubsubmenu() {
        console.info($(this).next());
        $(this).next().css('visibility', 'visible');
        $("ul#submenu").css('visibility', 'visible');
    }

    function closeSubsubmenu() {
        $(this).css('visibility', 'hidden');
        $(this).next().css('visibility', 'hidden');
    }

    $("li.servizi a").hoverIntent(mainmenu_cfg); 

    $("#submenu > li a").hoverIntent(submenu_cfg); 
});

发生的情况是，当我在主菜单中的链接上悬停时，第一个子菜单正确显示，但当我将鼠标移到子菜单上时，我想这会在一段时间后消失，因为调用了closeSubmenu函数。我想，子菜单也会发生同样的情况，但我仍然停留在这里，所以

如何保持子菜单处于打开状态？ 还有一件事：主菜单是垂直的，第一个子菜单是水平的，所以我需要在a元素上调用hoverIntent函数，而不是在li上调用，否则它会激活整个li，实际上更长

编辑：

下面是一个演示：

编辑2： 我几乎解决了这个问题，添加了很多条件。它并不完美，需要优化，但它可以工作：

jQuery(function() {

    var mainmenu_cfg = {
        interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
    }
    var submenu_cfg = {
        over: openSubsubmenu,
sensitivity: 100,
timeout: 200,
out: closeSubsubmenu 
    }

    var subsubmenu_cfg = {
        over: onSubsubmenu,
sensitivity: 100,
timeout: 500,
out: offSubsubmenu 
    }

    var hover_submenu = false;
    var hover_subsubmenu = false;

    function openSubmenu() {
        $("ul#submenu").css('visibility', 'visible');
    }
    function closeSubmenu() {
        if (hover_submenu || hover_subsubmenu) {
            $("ul#submenu").css('visibility', 'visible');
            hover_submenu = false;
            hover_subsubmenu = false;
        }
        else {
            console.info(hover_submenu);
            console.info('close submenu');
            $("ul#submenu").css('visibility', 'hidden');
        }
    }


    function openSubsubmenu() {
        hover_submenu = true;
        $(this).next().css('visibility', 'visible');
    }

    function closeSubsubmenu() {

        if (!hover_subsubmenu)
            $(this).next().css('visibility', 'hidden');
        if (hover_submenu || hover_subsubmenu)
        {
            $("ul#submenu").css('visibility', 'visible');
            hover_submenu = false;
            hover_subsubmenu = false;
        }
        else if ((hover_submenu == true) && (hover_subsubmenu == false)) {
            $(this).next().css('visibility', 'hidden');
            $("ul#submenu").css('visibility', 'visible');
            hover_submenu = false;
        } else {
            $("ul#submenu").css('visibility', 'hidden');
        }
    }

    function onSubsubmenu() {
        hover_subsubmenu = true;
        $(this).parent().parent().css('visibility', 'visible');
    }

    function offSubsubmenu() {
        $(this).parent().parent().css('visibility', 'hidden');
    }

    $("li.servizi a").hoverIntent(mainmenu_cfg); 
    $("#submenu > li a").hoverIntent(submenu_cfg); 
  $("ul.subsubmenu > li a").hoverIntent(subsubmenu_cfg); 
});

---

你好，卡洛，你能用代码设置一个吗？格拉齐！太好了！这是演示：所以。。。在您提供的演示中，这是您的问题的精确副本吗？如果是这样的话，我们就看一看嗯，是的。如你所见，如果你将鼠标悬停在servizi上，然后在speciale上，子菜单会在一段时间后消失，我可以看到，我会尝试混合一些东西！：