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>Drop-down menu demo</title> 6 <script src="js/jquery-1.6.1.min.js"></script> 7 <style> 8 *{ padding:0; margin:0;} 9 body{ font-size:12px; font-family:"宋体", Arial; color:#333; background:#fff; padding:50px;} 10 ul{ list-style:none;} 11 a{ color:#333; text-decoration: none;} 12 .dropMenu{ margin:20px 0;} 13 .dropMenu h3{ width:140px; padding-left:10px; font-size:12px; font-weight:normal; height: 28px; line-height: 28px; background:#f4f4f4; border:1px solid #ddd; cursor: pointer;} 14 /*.dropMenu h3 span{ float:right; background:url(images/dropMenu-btn1.gif) left bottom no-repeat; 7px; height:7px; position:relative; top:10px; right:10px;}*/ 15 .dropMenu h3 span{ float:right; padding:2px 10px 0 0;} 16 .itemList{ width:150px; border-left:1px solid #ddd; border-right:1px solid #ddd;} 17 .itemList li{ padding:8px; border-bottom:1px solid #ddd;} 18 .itemList li a{ display:block;} 19 .itemList li a:hover{ color:#06C; font-weight: bold;} 20 .grey-bg{ background:#f4f4f4;} 21 </style> 22 </head> 23 <!-- ◀▶▼▲--> 24 <body> 25 <h3>简单的 Jquery 下拉菜单</h3> 26 <div class="dropMenu"> 27 <h3><span>▼</span>下拉菜单</h3> 28 <ul class="itemList"> 29 <li><a href="#">列表一</a></li> 30 <li><a href="#">列表二</a></li> 31 <li><a href="#">列表三</a></li> 32 <li><a href="#">列表四</a></li> 33 <li><a href="#">列表五</a></li> 34 <li><a href="#">列表六</a></li> 35 </ul> 36 </div> 37 <div class="dropMenu"> 38 <h3><span>▼</span>下拉菜单</h3> 39 <ul class="itemList"> 40 <li><a href="#">列表1</a></li> 41 <li><a href="#">列表2</a></li> 42 <li><a href="#">列表3</a></li> 43 <li><a href="#">列表4</a></li> 44 <li><a href="#">列表5</a></li> 45 <li><a href="#">列表6</a></li> 46 </ul> 47 </div> 48 <script> 49 $(function(){ 50 //$('.itemList li:odd').addClass('grey-bg'); 51 $('.itemList li:odd').css('background','#f4f4f4'); 52 $('.dropMenu h3').click(function(){ 53 $(this).next('.itemList').slideToggle(300); 54 }); 55 $('.itemList > li > a').hover(function(){ 56 $(this).stop().animate({paddingLeft:'20px'},200); 57 },function(){ 58 $(this).stop().animate({paddingLeft:'0px'},100); 59 }); 60 }); 61 </script> 62 </body> 63 </html>