我使用 CSS 创建了一个简单的下拉菜单，并想使用 jQuery 创建一个淡入淡出。淡入淡出有效，但只有在将鼠标悬停在列表元素上两次后才会起作用。第一次悬停没有淡入淡出效果。
这是 HTML 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dropdown_2</title>
<link href="css/dropDrownNav.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav li").has("ul").hover(function () {
$(this).addClass("current").children("ul").fadeIn(500);
}, function () {
$(this).removeClass("current").children("ul").stop(true, true).css("display", "none");
});
});
</script>
</head>
<body>
<!--begin added nav-->
<div id="main-navigation" >
<div id="nav">
<ul>
<li class="first"><a href="#">Home</a>
<ul>
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
</ul>
</li>
<li><a href="#">About Me</a>
<ul>
<li><a href="#">About Me1</a></li>
<li><a href="#">About Me2</a></li>
<li><a href="#">About Me3</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Photos</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a>
<ul>
<li><a href="#">Contact Me1</a></li>
<li><a href="#">Contact Me2</a></li>
<li><a href="#">Contact Me3</a></li>
</ul>
</li>
</ul>
</div>
</div><!--end main navigation-->
<!--end added nav-->
</body>
</html>
CSS 代码:
*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#000;
margin: 0px auto;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #000;
padding:20px;
display:block;
text-decoration:none;
color:#000;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
链接到 working example .
谢谢， 肯
最佳答案
尝试从这行 css 中移除 display:block...
#nav ul li:hover ul {
display: block;
position: absolute;
}
关于jQuery 不适用于第一次悬停时的下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13516915/