悬停下降与溢出

所以我有这个下拉菜单，当你悬停在一个链接下拉菜单弹出溢出为自动。我的问题是，只要将鼠标放在底部链接上或尝试滚动它，悬停就会停止，并且块会消失，因为它已达到其高度限制。它在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是我的头在正确的风格标签， divs在body中，脚本在body标签之前。

来源

2012-01-30 Howdy_McGee

我真的不想为单个悬停效果导入整个库。像这样的小事情，我发现JS更容易IMO – 2012-01-30 20:01:50

公平的，如果它只是这一个事件。 – VictorKilo 2012-01-30 21:01:11

如果你不介意的菜单下拉，当你将鼠标悬停在粉红色的容器，而不是仅仅的链接，你可以使用这个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。

来源

2012-01-30 19:29:31 MMM

谢谢，我可能应该在我的问题中指定。真的，这是一个侧栏，每个容器都是一个类。：S抱歉 – 2012-01-30 19:33:42

但是，阻止你为每个容器制定'：hover'规则？ – MMM 2012-01-30 19:35:40

如果我放置一个'.container：hover'并且有3个容器类，那么无论它们在哪个容器上悬停，菜单都会弹出正确的？我不能让它成为第一个孩子，因为其他的东西需要放在首位。 'nth'子不支持在每个浏览器中，但不是支持：（ – 2012-01-30 19:45:29

悬停下降与溢出

回答

相关问题