View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jquery实现网页二级菜单简单代码-工作图库</title> 6 <style type="text/css"> 7 .nav{float:left;position:relative;width:253px;} 8 h2,ul,p{margin:0;padding:0;text-align:center;} 9 h2{font-weight:400;font-size:100%;background:#9B203F;border-bottom:solid 1px #500C1B;} 10 h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;} 11 ul{font-size:0;background:#9B203F;padding:0 0 40px;} 12 ul li{list-style-type:none;padding-bottom:5px;color:#fff;font-size:14px;padding:0 20px;height:34px;line-height:34px;position:relative;} 13 ul li a{border-bottom:dashed 1px #E67A92;display:block;width:196px;margin:0 auto;} 14 ul li.hover_bg{background:#C30431;} 15 .Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;padding-bottom:30px;display:none;} 16 .Secon_Dary p{padding:0 20px;} 17 .Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;border-bottom:dashed 1px #E67A92;} 18 a{cursor:pointer;} 19 </style> 20 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 21 <script type="text/javascript"> 22 $(document).ready(function(){ 23 $(".nav ul li").hover(function(){ 24 $(this).addClass("hover_bg"); 25 $(this).children("div").show(); 26 },function(){ 27 $(this).removeClass("hover_bg"); 28 $(this).children("div").hide(); 29 }) 30 31 }) 32 </script> 33 </head> 34 35 <body> 36 查找更多代码，请访问：<a href="http://www.gongzuotuku.com/html/js/effect/" target="_blank">工作图库</a>,很好记，工作图库，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。<hr> 37 <!--欢迎来到工作图库网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：http://www.gongzuotuku.com，打造靓站--> 38 <div class="nav"> 39 <h2><a>ALL CATEGORIES</a></h2> 40 <ul> 41 <li> 42 <a>Posojg</a> 43 <div class="Secon_Dary"> 44 <p> 45 <a>AAAAAAAAAAA</a> 46 <a>BBBBBB</a> 47 <a>AAAAAAAAAAA</a> 48 <a>BBBBBB</a> 49 <a>AAAAAAAAAAA</a> 50 <a>BBBBBB</a> 51 <a>AAAAAAAAAAA</a> 52 <a>BBBBBB</a> 53 </p> 54 </div> 55 </li> 56 <li> 57 <a>FOwojg</a> 58 <div class="Secon_Dary"> 59 <p> 60 <a>AAAAAAAAAAA</a> 61 <a>BBBBBB</a> 62 <a>AAAAAAAAAAA</a> 63 <a>BBBBBB</a> 64 <a>AAAAAAAAAAA</a> 65 <a>BBBBBB</a> 66 <a>AAAAAAAAAAA</a> 67 <a>BBBBBB</a> 68 </p> 69 </div> 70 </li> 71 <li> 72 <a>Sowgjed</a> 73 <div class="Secon_Dary"> 74 <p> 75 <a>AAAAAAAAAAA</a> 76 <a>BBBBBB</a> 77 <a>AAAAAAAAAAA</a> 78 <a>BBBBBB</a> 79 <a>AAAAAAAAAAA</a> 80 <a>BBBBBB</a> 81 <a>AAAAAAAAAAA</a> 82 <a>BBBBBB</a> 83 </p> 84 </div> 85 </li> 86 <li> 87 <a>Gowjgeo</a> 88 <div class="Secon_Dary"> 89 <p> 90 <a>AAAAAAAAAAA</a> 91 <a>BBBBBB</a> 92 <a>AAAAAAAAAAA</a> 93 <a>BBBBBB</a> 94 <a>AAAAAAAAAAA</a> 95 <a>BBBBBB</a> 96 <a>AAAAAAAAAAA</a> 97 <a>BBBBBB</a> 98 </p> 99 </div> 100 </li> 101 </ul> 102 </div><!--nav--> 103 </body> 104 </html><!--一下的代码和特效无关,如果显示不了效果，去掉下面代码！--> 105 <LINK rel=Stylesheet type=text/css href='http://www.gongzuotuku.com/templets/default/style/banner.css'> 106 <div class='bottom'><script src='http://www.gongzuotuku.com/plus/ad_js.php?aid=5201314' language='javascript'></script></div> 107 <!--一下的代码和特效无关,如果显示不了效果，去掉上面代码！-->
今天遇到了一个有点让我一时没反应过来的东西，回来想想其实他应该用JQuery来实现，应该简单的多，jquery,网页,二级菜单,导航菜单,js代码,特效代码,jquery实现网页二级菜单简单代码,建议使用！回来上网查了查确实是，记着别忘了，提醒自己！