jQuery的hover事件,鼠标经过能显示子菜单,移出就不能隐藏子菜单。代码如下

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿菜单</title>
<style type="text/css">
body{font-size:14px;}
ul{margin:0; padding:0; list-style:none;}
a{text-decoration:none; color:#000;}

#wrap{position:relative; top:0px;width:876px; height:34px; line-height:34px; margin:0 auto;}
ul#menu li{float:left; display:block; width:146px; height:34px; text-align:center;}
ul#menu li a:link,ul#menu li a:visited{display:block; background:url(link.gif) no-repeat;}
ul#menu li a:hover{background:url(hover.gif) no-repeat;}
/*子菜单*/
ul#menu li ul{position:absolute; top:35px; width:500px; display:none;}
ul#menu li ul.sub_menu_2{left:130px;}
ul#menu li ul.sub_menu_4{left:325px;}
ul#menu li ul li{font-size:12px; width:70px; height:25px; float:left; display:block;}
ul#menu li ul li a:link,ul#menu li ul li a:visited{color:#666; background:none; display:inline;}
</style>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
// var _over = $("ul#menu>li");
$("ul#menu>li:has(ul)").hover(
function(){
$(this).children().fadeIn(400);
},
function(){
$(this).children.fadeOut();
}
);
});
</script>
</head>

<body>
<div id="wrap">
<ul id="menu">
<li><a href="#" >凯撒首页</a></li>
<li><a href="#" >最新动态页</a>
<ul class="sub_menu_2">
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a></li>
</ul>
</li>
<li><a href="#" >产品及预定中心页</a></li>
<li><a href="#" >帮助及查询中心页</a>
<ul class="sub_menu_4">
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a></li>
</ul>
</li>
<li><a href="#" >会员俱乐部页</a></li>
<li><a href="#" >凯撒论坛页</a></li>
</ul>
</div>
</body>
</html>
展开
 我来答
miniappucb88517h4h65
推荐于2018-03-20 · TA获得超过1343个赞
知道小有建树答主
回答量:446
采纳率:0%
帮助的人:628万
展开全部
将JQ代码改为这样就行:
<script type="text/javascript" language="javascript">
$(function(){
$("ul#menu>li:has(ul)").hover(
function(){
$(this).find('ul').fadeIn(400);
},
function(){
$(this).find('ul').fadeOut(400);
}
);
});
</script>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式