Javascript 简单弹出菜单

我正在建立一个下拉菜单。主图像有一个滚动和一个滚动事件，用于切换包含我的弹出菜单的div的显示。问题是当我从主图像中滚出来时，我的弹出菜单消失了（很明显！）。我希望能够在弹出菜单上向下移动mose，而不会使其消失。我还希望图像具有滚动状态-以下是我的代码：

<a class="mypage" href="mypage.html" id="mypageid" onmouseover="document.getElementById('menu-container').style.display = 'block';"  onmouseout="document.getElementById('menu-container').style.display = 'none';"></a>
<div id="menu-container">
    <ul>
        <li><a href="#"><img src="images/nav/button1.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button2.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button3.jpg" alt="" width="126px" height="21px"/></a></li>
    </ul></div>

解决此问题的常见模式是使用计时器延迟隐藏菜单。如果用户的鼠标在计时器启动之前重新进入触发器或菜单本身，则计时器（和隐藏）将被清除

var menuTimer = null;

$('.mypage, #menu-container').mouseenter(function(e) {
    $('#menu-container').show();
    clearTimeout(menuTimer);
});

$('.mypage, #menu-container').mouseleave(function(e) {
    menuTimer = setTimeout(function() {
        $('#menu-container').hide();
    }, 300);
});

例如：

---

这个概念可以很容易地适用于vanilla JS。

这个页面可以帮助您

---

他们有一个菜单生成器，你可以看到CSS是如何工作的。

我强烈建议大家阅读一下这个问题的一个权威解决方案——单独列出

为了获得视觉灵感，Codrops最近发表了一篇文章，其中有一些可爱的例子：有人知道当你在浏览器窗口内外滚动时，为什么会触发这个JS吗？这在所有浏览器中都会发生！别担心，解决了它-意识到它与我的身体课冲突了！再次感谢！