jQuery+CSS实现的高亮显示选中二级菜单效果
<!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=gb2312" />
<title>jQuery+CSS实现的高亮显示选中二级菜单效果丨石家庄地毯</title>
<style type="text/css">
*{margin:0;padding:0}
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:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;}
ul#menu li a:link{display:block;background:#EDEBEC;font-size:14px;color:#333;width:92px;height:37px;line-height:37px;}
ul#menu li a:hover,.red{background:#CE070E!important;color:#FFF!important;}
/*子菜单*/
ul#menu li ul{position:absolute; top:37px;width:90px; display:none;border:1px #CE070E solid;border-top:none;background:skyblue;}
ul#menu li ul li{float:left;}
ul#menu li ul li a:link{width:90px;height:37px;line-height:37px;background:#FFF;}
ul#menu li ul li a:hover{color:#CE070E; text-decoration:underline}
ul#menu li ul li{width:90px;height:37px;line-height:37px;float:left;}
</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(){
$("ul#menu>li:has(ul)").hover(
function(){
$(this).children(‘a‘).addClass(‘red‘).end().find(‘ul‘).fadeIn(400);
},
function(){
$(this).children(‘a‘).removeClass(‘red‘).end().find(‘ul‘).fadeOut(400);
}
);
});
</script>
</head>
<body>
<div id="wrap">
<ul id="menu">
<li><a href="#" >CsrCode.Cn</a></li>
<li><a href="#" >最新动态页</a>
<ul>
<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>
<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>
<div style="height:200px;"></div><br>如果不显示预览效果，请刷新一下本页面先~~~ 所需js文件：<a href="/images/jquery.min.js">jquery.min.js</a><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：阿里西西</font></p>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
