jQuery下拉菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 02 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 03 <head>
6
7 04 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
8
9 05 <title>jQuery下拉菜单</title>
10
11 06 <script type='text/javascript' src='/ajaxjs/jquery1.3.2.js'></script>
12
13 07 <style type="text/css">
14
15 08 ul{ margin:0; padding:0;}
16
17 09 ul li{ list-style:none}
18
19 10 #div{ width:960px; height:28px;}
20
21 11 #div ul li{ float:left; height:28px; display:inline; line-height:28px; padding:0px 20px; position:relative;}
22
23 12 #div ul li ul{ position:absolute; z-index:99; display:none; top:28px; width:140px; left:0px;}
24
25 13 #div ul li ul li{ display:block; width:140px; height:26px; line-height:26px; background-color:#666; border-bottom:1px #FFFFFF solid;}
26
27 14 #div ul li a{ color:#000000; text-decoration:none;}
28
29 15 </style>
30
31 16 <script type="text/javascript">
32
33 17 $(function(){
34
35 18 $("#div ul li").hover(function(){
36
37 19 $(this).css("background","#333333").children("ul").slideDown();
38
39 20 },function(){
40
41 21 $(this).css("background","#fff").children("ul").slideUp();
42
43 22 })
44
45 23 $("#div ul li ul li").hover(function(){
46
47 24 $(this).css("background","#333");
48
49 25 },function(){
50
51 26 $(this).css("background","#666");
52
53 27 })
54
55 28 })
56
57 29 </script>
58
59 30 </head>
60
61 31 <body>
62
63 32 <div id="div">
64
65 33 <ul>
66
67 34 <li><a href="#">首页</a></li>
68
69 35 <li><a href="#">企业资源</a>
70
71 36 <ul>
72
73 37 <li>企业资源</li>
74
75 38 <li>企业资源</li>
76
77 39 </ul>
78
79 40 </li>
80
81 41 <li><a href="#">新闻中心</a>
82
83 42 <ul>
84
85 43 <li>新闻中心</li>
86
87 44 <li>新闻中心</li>
88
89 45 <li>新闻中心</li>
90
91 46 </ul>
92
93 47 </li>
94
95 48 <li><a href="#">工程业绩</a>
96
97 49 <ul>
98
99 50 <li>工程业绩</li>
100
101 51 <li>工程业绩</li>
102
103 52 <li>工程业绩</li>
104
105 53 </ul>
106
107 54 </li>
108
109 55 <li><a href="#">仪器设备</a>
110
111 56 <ul>
112
113 57 <li>仪器设备</li>
114
115 58 <li>仪器设备</li>
116
117 59 </ul>
118
119 60 </li>
120
121 61 <li><a href="#">企业文化</a>
122
123 62 <ul>
124
125 63 <li>企业文化</li>
126
127 64 <li>企业文化</li>
128
129 65 </ul>
130
131 66 </li>
132
133 67 <li><a href="#">联系我们</a>
134
135 68 <ul>
136
137 69 <li>联系我们</li>
138
139 70 <li>联系我们</li>
140
141 71 <li>联系我们</li>
142
143 72 </ul>
144
145 73 </li>
146
147 74 </ul>
148
149 75 </div>
150
151 76 </div>
152
153 77 </body>
154
155 78 </html>
2
3 02 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 03 <head>
6
7 04 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
8
9 05 <title>jQuery下拉菜单</title>
10
11 06 <script type='text/javascript' src='/ajaxjs/jquery1.3.2.js'></script>
12
13 07 <style type="text/css">
14
15 08 ul{ margin:0; padding:0;}
16
17 09 ul li{ list-style:none}
18
19 10 #div{ width:960px; height:28px;}
20
21 11 #div ul li{ float:left; height:28px; display:inline; line-height:28px; padding:0px 20px; position:relative;}
22
23 12 #div ul li ul{ position:absolute; z-index:99; display:none; top:28px; width:140px; left:0px;}
24
25 13 #div ul li ul li{ display:block; width:140px; height:26px; line-height:26px; background-color:#666; border-bottom:1px #FFFFFF solid;}
26
27 14 #div ul li a{ color:#000000; text-decoration:none;}
28
29 15 </style>
30
31 16 <script type="text/javascript">
32
33 17 $(function(){
34
35 18 $("#div ul li").hover(function(){
36
37 19 $(this).css("background","#333333").children("ul").slideDown();
38
39 20 },function(){
40
41 21 $(this).css("background","#fff").children("ul").slideUp();
42
43 22 })
44
45 23 $("#div ul li ul li").hover(function(){
46
47 24 $(this).css("background","#333");
48
49 25 },function(){
50
51 26 $(this).css("background","#666");
52
53 27 })
54
55 28 })
56
57 29 </script>
58
59 30 </head>
60
61 31 <body>
62
63 32 <div id="div">
64
65 33 <ul>
66
67 34 <li><a href="#">首页</a></li>
68
69 35 <li><a href="#">企业资源</a>
70
71 36 <ul>
72
73 37 <li>企业资源</li>
74
75 38 <li>企业资源</li>
76
77 39 </ul>
78
79 40 </li>
80
81 41 <li><a href="#">新闻中心</a>
82
83 42 <ul>
84
85 43 <li>新闻中心</li>
86
87 44 <li>新闻中心</li>
88
89 45 <li>新闻中心</li>
90
91 46 </ul>
92
93 47 </li>
94
95 48 <li><a href="#">工程业绩</a>
96
97 49 <ul>
98
99 50 <li>工程业绩</li>
100
101 51 <li>工程业绩</li>
102
103 52 <li>工程业绩</li>
104
105 53 </ul>
106
107 54 </li>
108
109 55 <li><a href="#">仪器设备</a>
110
111 56 <ul>
112
113 57 <li>仪器设备</li>
114
115 58 <li>仪器设备</li>
116
117 59 </ul>
118
119 60 </li>
120
121 61 <li><a href="#">企业文化</a>
122
123 62 <ul>
124
125 63 <li>企业文化</li>
126
127 64 <li>企业文化</li>
128
129 65 </ul>
130
131 66 </li>
132
133 67 <li><a href="#">联系我们</a>
134
135 68 <ul>
136
137 69 <li>联系我们</li>
138
139 70 <li>联系我们</li>
140
141 71 <li>联系我们</li>
142
143 72 </ul>
144
145 73 </li>
146
147 74 </ul>
148
149 75 </div>
150
151 76 </div>
152
153 77 </body>
154
155 78 </html>
