jQuery+CSS实现的高亮显示选中二级菜单效果
浏览数：72 /
时间：2015年06月09日
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
