Javascript导航，悬停显示，取消覆盖隐藏超时，如何？

我有导航：

<li class="sliding-element zobrazSubMenu">
    <a href="/Antivirusy.html">Antivírusy</a>
    <div class="sub-content">Bla blabla</div>
</li>
<li class="sliding-element zobrazSubMenu">
    <a href="/Virusy.html">Virusy</a>
    <div class="sub-content">Some content</div>
</li>

呜呜呜呜


一些内容

如果我将鼠标悬停在

元素上，我需要显示sub-content div，但是如果我离开鼠标，我需要添加一些超时（1秒）来隐藏子内容

如果我在超时结束（1秒）之前将鼠标悬停在第一个

，第二个

，然后再次悬停在rist

，请不要隐藏第一个子内容

我想要的实例：黑色导航悬停。 将鼠标移动到“车辆”，然后将鼠标移动到“关于我们”，然后再次快速移动到“车辆”。这是我不知道的

---

我需要将此应用于我的自定义垂直菜单。

假设您使用jQuery，您可以这样做：

HTML

---

您在使用jQuery吗？请查看他们的源代码。它们有一个名为jquery.dcmegamenu.1.3.2.js的文件，用于处理该菜单的效果。看看他们是怎么做的，然后根据你自己的需要修改它。那个文件对我来说太强大了，我只想要这个效果。该文件包含更多设置，我找不到它，并且timeout（）不在该文件中。这不正常，我也有这种效果，但如果需要显示其他子内容，则仅当所有其他子内容都隐藏时，如上面的示例所示。在dcmegamenu.js中，文件是

$（'li'，$dcMegaMenuObj）我不知道是什么意思。
<li class="sliding-element zobrazSubMenu" onmouseenter="showSubContent(this)" onmouseleave="hideSubContent(this)">
    <a href="/Antivirusy.html">Antivírusy</a>
    <div class="sub-content">Bla blabla</div>
</li>
<li class="sliding-element zobrazSubMenu" onmouseenter="showSubContent(this)" onmouseleave="hideSubContent(this)">
    <a href="/Virusy.html">Virusy</a>
    <div class="sub-content">Some content</div>
</li>

function showSubContent(sender) {

    if (sender.timerHandle === undefined) {
        $(sender).find(".sub-content").show();
    } else {
        clearTimeout(sender.timerHandle);
        sender.timerHandle = undefined;
    }
}

function hideSubContent(sender) {
    sender.timerHandle = setTimeout(function () {
        $(sender).find(".sub-content").hide();
        sender.timerHandle = undefined;
    }, 1000);
}