Question

所以我有这个下拉菜单，当你将鼠标悬停在一个链接上时会弹出一个下拉菜单，溢出为auto。我的问题是，只要我将鼠标放在底部链接上或尝试滚动它，悬停就会停止，并且该块会在达到其高度限制时消失。它在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上的示例。

悬停下降溢出

1 个答案: