javascript - 悬停下拉溢出

Question

所以我有这个下拉菜单，当您将鼠标悬停在链接上时，会弹出一个下拉菜单，并自动溢出。我的问题是，一旦我将鼠标放在底部链接上或尝试滚动它，悬停就会停止并且 block 消失，就像它达到了高度限制一样。它在 Chrome 和 Firefox 中执行此操作，但在 IE8 中工作得很好。关于我可以做些什么来解决这个问题的建议？这是我的代码:

CSS

*{margin:0px; padding:0px}
#container{background-color:pink;padding:30px;width:300px;}
#dropMenu{display: none;
     height: 75px;
     overflow: auto;
     width: 200px;}

HTML

<div class="container">
    <a href="#" onMouseOver="menuOpen()">Hover This</a>
    <div id="dropMenu">
        <a href="#">Menu Item1</a><br />
        <a href="#">Menu Item2</a><br />
        <a href="#">Menu Item3</a><br />
        <a href="#">Menu Item4</a><br />
        <a href="#">Menu Item5</a><br />
        <a href="#">Menu Item6</a><br />
    </div>
</div>

脚本

<script type="text/javascript">
    function menuOpen(){
        document.getElementById('dropMenu').style.display = 'block';
    }

    document.getElementById('dropMenu').onmouseout = function (e) {
        e = e || window.event;
        var target = e.srcElement||e.target;
        if (target.id == "dropMenu") {
            document.getElementById('dropMenu').style.display = 'none';
        }
    };
</script>

在我收到问题之前，假设我的 CSS 位于标题中正确的样式标签中，div 位于正文中，而脚本位于结束正文标签之前。

Answer 1

如果您不介意当您将鼠标悬停在粉红色容器上时菜单会下拉，而不仅仅是链接，您可以使用这个纯 CSS 解决方案:

*{margin:0px; padding:0px}

#container{background-color:pink;padding:30px;width:300px;}

#dropMenu{display: none;
  height: 75px;
  overflow: auto;
  width: 200px;}

#container:hover #dropMenu {
  display:block;
}

不需要 JavaScript。它更干净，效果更好。看看我在 jsFiddle 上的例子.