快速鼠标移动时下拉导航栏崩溃

Question

我有一个类似于下面的导航栏。

一切正常。除非鼠标来回移动链接的速度过快几次。有一点鼠标悬停在一个链接上，但没有显示下拉菜单。甚至没有添加activeMenu（在检查中未添加，并且颜色不是绿色）。

要再次查看菜单，必须将鼠标移出li（链接），然后返回。它将继续正常运行。

注意-1：：setTimeout中removeClass的{​​{1}}是为了让导航栏有一些时间滚动。

注意2：：我的假设是；当代码被卡在resetMenu(x)和setMenu()之间时，就会发生这种情况，这最终会导致删除所有activeMenu类，即使鼠标悬停也不添加它。

进行测试：快速将鼠标在“第一”和“第二”元素之间移动几次。您将到达鼠标悬停在First元素上的位置，但它不是绿色（不是activeMenu），并且下拉列表也不会显示。

我尽力描述这个问题，让我知道是否有不清楚的地方。

resetMenu()

$("#navMain ul li").mouseenter(function () {
            setMenu(this);
        });
        $("#navMain ul li").mouseleave(function () {
            resetMenu(this);
        });
    function resetMenu(x) {
        $(x).find(".black-submenu").css("height", "0px");
        setTimeout(function () {
            $(x).removeClass('activeMenu');
        }, 200);
    }
    function setMenu(y) {
        $(y).siblings().removeClass("activeMenu");
        $(y).addClass('activeMenu');
        $(y).find(".black-submenu").css("height", "0px");
        $(y).find(".black-submenu").css("height", "150px");
        }

#navMain ul li {
float: left;
margin-right: 25px;
cursor: pointer;
}
#navMain ul li.activeMenu .black-submenu {
background: rgba(0,0,0,0.8);
width: 100%;
float: left;
transition: height .5s;
}
.activeMenu {
color: green;
}