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; width: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>
