CSS下拉可見性問題

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認爲即使您將鼠標懸停在元素的子元素上，鼠標也會「出去」。示例代碼：

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

希望有所幫助。