Question

我正在创建一个简单的下拉菜单，我使用JavaScript来显示和隐藏。菜单显示，链接仍然有效，但是当我将鼠标悬停在第一个链接下拉时，整个下拉菜单就会消失，即使我为它设置了一个特定的高度。我还有一个单独的div，其内容位于其下方，并且该div中的文本被推开，尽管我认为z-index会解决这个问题。

HTML

<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>

CSS

#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;}

的JavaScript

function showDrop() {
document.getElementById("dropdown").style.visibility="visible"; }
function hideDrop() {
document.getElementById("dropdown").style.visibility="hidden"; }

链接至：www.stacydavisdesign.com/index_menu.html

Answer 1

请改为使用onmouseleave事件，因为即使您正在悬停元素的子元素，onmouseout也会将鼠标视为“out”。示例代码：

$("#dropdown").mouseleave(function() { //jQuery required; onmouseleave is IE-specific
    hideDrop();
});

希望有所帮助。

CSS下拉可见性问题

1 个答案: