javascript - 当您按顺序将鼠标悬停在子导航上时，之前的子导航仍然存在，因此无法单击其中任何一个

Question

我已根据要求在此悬停功能中添加了 3 秒的 setTimeout，现在我在悬停在子导航上时遇到以下问题：

-> 当您按顺序将鼠标悬停在子导航上时，之前的子导航仍然存在，因此无法单击其中任何一个。

当您将鼠标悬停在新的主导航上时，有什么方法可以消除子导航的重叠？但是，当我们从主导航中移除鼠标时，我仍然想要 3 秒停止，以便我有时间选择子导航？

示例：http ://design1.advisorproducts.com/home

下面是这个 JQuery 代码：

$(function () {
    $("ul.dropdown li").hover(function () {
        var timeout = $(this).data("timeout");
        if(timeout) clearTimeout(timeout);
        $(this).addClass("hover");
        $('ul:first', this).css('visibility', 'visible');
    }, function () {
    $(this).data("timeout", setTimeout($.proxy(function() {
          $(this).removeClass("hover");
          $('ul:first', this).css('visibility', 'hidden');
      }, this), 600));
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});