我正在制作一个简单的下拉菜单,我使用 JavaScript 来显示和隐藏它。菜单显示,链接仍然有效,但是当我将鼠标悬停在第一个下 zipper 接上时,整个下拉菜单消失了,即使我为它设置了特定的高度。我还有一个单独的 div,它下面有内容,该 div 中的文本被推到一边,尽管我认为 z-index 可以解决这个问题。
function showDrop() {
document.getElementById("dropdown").style.visibility = "visible";
}
function hideDrop() {
document.getElementById("dropdown").style.visibility = "hidden";
}
#nav {
/* margin-left: 550px;
padding-top: 110px; */
font-family: 'Averia Serif Libre', cursive;
font-size: 24px;
position: relative;
}
#nav ul li {
display: block;
float: left;
margin-right: 10px;
}
#nav ul li a:link,
#nav ul li a:visited {
text-decoration: none;
float: left;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #00B2EE;
}
#nav ul li ul {
visibility: hidden;
top: 0;
left: 0;
display: block;
width: 100px;
height: 100px;
clear: both;
z-index: 2;
padding-top: 2px;
}
#nav ul li ul li {
width: 100px;
z-index: inherit;
background-color: #AAA;
font-size: 16px;
line-height: 22px;
}
<div id="nav">
<ul>
<li><a href="#" id="nAbout">About</a></li>
<li><a href="#" id="nPortfolio" onMouseOver="showDrop();">Portfolio</a>
<ul id="dropdown" onMouseOut="hideDrop();">
<li><a href="#">Print Design</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
<li><a href="#" id="nContact">Contact</a></li>
<li><a href="#" id="nBlog">Blog</a></li>
</ul>
</div>
最佳答案
请改用 onmouseleave
事件,因为 onmouseout
认为鼠标“离开”,即使您悬停在元素的子元素上也是如此。示例代码:
$("#dropdown").mouseleave(function() { //jQuery required; onmouseleave is IE-specific
hideDrop();
});
希望对您有所帮助。
关于CSS 下拉可见性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11959394/