纯CSS实现的多级下拉鼠标点击显示导航菜单代码

网站问题 2017-5-4 阅读量: 286 TAG:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264

< !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=utf-8" />
<title>纯CSS实现的多级下拉鼠标点击显示导航菜单代码</title>
<style type="text/css">
/* for this demo only */
#backgroundHolder { width:750px; height:490px; background:url(ulmulti4/pic.jpg); padding-top:10px; margin:0 auto; }
/* ---------------------------------------------------------------------------- */
/* default styling */
.nav, .nav ul { list-style-type:none; margin:0; padding:0; }
.nav a { text-decoration:none; }
.nav { font-family: arial, sans-serif; font-size:12px; width:650px; margin:0 auto; }
/* style the links */
.nav a { background:url(ulmulti4/box.gif) no-repeat right center; }
.nav a.top { background:url(ulmulti4/box.gif) no-repeat right top; }
.nav a.top2 { background:url(ulmulti4/box2.gif) no-repeat right top; }
.nav a.bottom { background:url(ulmulti4/box.gif) no-repeat right bottom; }
.right ul ul a { background:url(ulmulti4/box3.gif) no-repeat right center; }
.right ul ul a.top2 { background:url(ulmulti4/box3.gif) no-repeat right top; }
.right ul ul a.bottom { background:url(ulmulti4/box3.gif) no-repeat right bottom; }
/* style the element so that is does not affect the size of the link */
.nav a b { color:#600; font-weight:normal; display:block; padding:5px 10px 5px 15px; }
.nav .fly .main b { background: transparent url(ulmulti4/arrow.gif) no-repeat 117px 9px; }
.nav .down b { background: transparent url(ulmulti4/arrow2.gif) no-repeat 115px 11px; }
.nav .right ul b { text-align:right; }
.nav .right ul ul b { padding: 5px 15px 5px 10px; }
.nav .right ul .main b { background: transparent url(ulmulti4/arrow3.gif) no-repeat 15px 9px; text-align:right; }
.nav .right ul ul .main b { background: transparent url(ulmulti4/arrow3.gif) no-repeat 5px 9px; text-align:right; }
/* HEIGHT */
.nav ul ul { top:-22px; } /* position the top of the flyout first sub menus */
.nav ul ul ul { top:-25px; } /* position the top of the flyout second and third sub menus */
.nav ul.two { top:-40px; } /* position the top of the flyout sub menus with previous text on two lines */
/* WIDTH change this WITH CARE to suit your requirements */

/*set the link width here*/
.nav .drop, .nav a { width:130px; }
.nav ul li { max-width:130px; } /* fix for IE8 */
/* set the left flyout position here */
.nav ul ul { left:130px; }
/* set the right flyout positions here */
.nav li.right ul ul { left:auto; right:120px; }
.nav li.right ul ul ul { left:auto; right:130px; }
/* make this WIDTH - 1px */ /* or WIDTH - 0.063em if using em sizing */
.nav a { margin-right:-129px; }
/* ---------------------------------------------------------------------------- */

/* DO NOT CHANGE ANYTHING BELOW */
.nav li { float:left; } /* fixes IE bugs, and allows for clearing */
.nav ul { float:left; position:relative; z-index:20; } /* necessary for float drop and to stack the <ul>s */
.nav ul li { clear:left; } /* must clear the floated list item inside sublist */
.nav a { position:relative; display:block; } /* needs to have a position, to be above the rest */
.nav a.main { float:left; /* necessary for float drop */ margin-top:10000px; } /* bring the top level links back into view */
.nav .drop, .nav .fly { margin-top:-10000px; } /* hide the sub links and their containers, opera has low upper limits */
.nav ul { margin-bottom:-5000px; } /* avoid any interaction between the subs, can be any large size */
/* The bits that do ALL the work to bring the sub menus into view */

/* .nav a:hover, */ /* un-comment this style if you want the menu to work on hover */
.nav a:focus, .nav a:active { margin-right:0; z-index:10; outline:0; }
.nav a:hover b, .nav a:focus b, .nav a:active b { color:#060; cursor:pointer; } /* this is for keyboard tabbing color change */
/* OPERA fix */
.nav ul:hover, .nav ul ul:hover { clear:left; } /* to stop intermittent sub link :hover problems */

/* ---------------------------------------------------------------------------- */
</ul></style>

</head>
<body>
<div id="backgroundHolder">
<ul class="nav">
<li class="drop"><a class="main top" href="#url">Home</a></li>
<li class="drop"><a class="main down top" href="#url">Equipment</a>
<ul>
<li class="fly"><a class="main" href="#url">Cameras</a>
<ul>
<li><a class="top2" href="#url">Film Type</a></li>
<li><a href="#url">Compact</a></li>
<li><a href="#url">Polaroid</a></li>
<li><a href="#url">Digital</a></li>
<li class="fly"><a class="main" href="#url">Digital SLR</a>
<ul>
<li><a class="top2" href="#url">Canon</a></li>
<li><a href="#url">Nikon</a></li>
<li><a href="#url">Panasonic</a></li>
<li><a class="bottom" href="#url">Kodak</a></li>
</ul>
</li>
<li><a class="bottom" href="#url">Second Hand</a></li>
</ul>
</li>
<li class="fly"><a class="main" href="#url">Video Cameras & Accessories</a>
<ul class="two">
<li class="fly"><a class="main top2" href="#url">Latest Models</a>
<ul>
<li><a class="top2" href="#url">Nikon</a></li>
<li><a href="#url">Panasonic</a></li>
<li><a href="#url">Canon</a></li>
<li><a href="#url">Pentax</a></li>
<li><a class="bottom" href="#url">Minolta</a></li>
</ul>
</li>
<li><a href="#url">Special Offers</a></li>
<li><a class="bottom" href="#url">Professional</a></li>
</ul>
</li>
<li class="fly"><a class="main" href="#url">Lenses</a>
<ul>
<li class="fly"><a class="main top2" href="#url">Digital</a>
<ul>
<li><a class="top2" href="#url">Standard</a></li>
<li><a href="#url">Telephoto</a></li>
<li><a href="#url">Wide Angle</a></li>
<li class="fly"><a class="main" href="#url">Zoom</a>
<ul>
<li><a class="top2" href="#url">Nikon</a></li>
<li><a href="#url">Pentax</a></li>
<li><a href="#url">Minolta</a></li>
<li><a class="bottom" href="#url">Panasonic</a></li>
</ul>
</li>
<li class="fly"><a class="main" href="#url">Zoom with Macro</a>
<ul>
<li><a class="top2" href="#url">Panasonic</a></li>
<li><a href="#url">Minolta</a></li>
<li><a href="#url">Pentax</a></li>
<li><a href="#url">Canon</a></li>
<li><a class="bottom" href="#url">Nikon</a></li>
</ul>
</li>
<li><a href="#url">Fisheye</a></li>
<li><a class="bottom" href="#url">x2 converters</a></li>
</ul>
</li>
<li class="fly"><a class="main" href="#url">Standard SLR</a>
<ul>
<li><a class="top2" href="#url">Canon</a></li>
<li><a href="#url">Nikon</a></li>
<li><a href="#url">Panasonic</a></li>
<li><a href="#url">Pentax</a></li>
<li><a class="bottom" href="#url">Minolta</a></li>
</ul>
</li>
<li><a href="#url">Cases</a></li>
<li class="fly"><a class="main" href="#url">Large Format</a>
<ul>
<li><a class="top2" href="#url">Hasselblad</a></li>
<li><a href="#url">Arca-Swiss</a></li>
<li><a class="bottom" href="#url">Leica</a></li>
</ul>
</li>
<li><a href="#url">Lens Hoods</a></li>
<li><a class="bottom" href="#url">Lens Cleaners</a></li>
</ul>
</li>
<li><a href="#url">Tripods</a></li>
<li><a href="#url">Flashguns</a></li>
<li><a href="#url">Accessories, filters & lens covers</a></li>
<li><a href="#url">Special Offers</a></li>
<li><a class="bottom" href="#url">Electronics</a></li>
</ul>
</li>
<li class="drop"><a class="main down top" href="#url">Accessories</a>
<ul>
<li class="fly"><a class="main" href="#url">Flashguns</a>
<ul>
<li class="fly"><a class="main top2" href="#url">Digital Cameras</a>
<ul>
<li><a class="top2" href="#url">Nikon</a></li>
<li><a href="#url">Canon</a></li>
<li><a href="#url">Panasonic</a></li>
<li><a href="#url">Pentax</a></li>
<li><a class="bottom" href="#url">Kodak</a></li>
</ul>
</li>
<li><a href="#url">Film Cameras</a></li>
<li><a href="#url">Reflectors</a></li>
<li><a href="#url">Stands</a></li>
<li><a href="#url">Remote Control</a></li>
<li><a class="bottom" href="#url">Batteries</a></li>
</ul>
</li>
<li class="fly"><a class="main" href="#url">Filters</a>
<ul>
<li><a class="top2" href="#url">Ultra Violet</a></li>
<li><a href="#url">Lens protection</a></li>
<li><a href="#url">Yellow</a></li>
<li><a href="#url">Red</a></li>
<li><a href="#url">Orange</a></li>
<li><a class="bottom" href="#url">Blue</a></li>
</ul>
</li>
<li class="fly"><a class="main" href="#url">Remote Control</a>
<ul>
<li><a class="top2" href="#url">Canon</a></li>
<li><a href="#url">Nikon</a></li>
<li><a class="bottom" href="#url">Pentax</a></li>
</ul>
</li>
<li class="fly"><a class="main" href="#url">Camera Cases</a>
<ul>
<li><a class="top2" href="#url">Pentax</a></li>
<li><a href="#url">Nikox</a></li>
<li><a href="#url">Canon</a></li>
<li><a href="#url">Pentax</a></li>
<li><a href="#url">Kodak</a></li>
<li><a class="bottom" href="#url">Minolta</a></li>
</ul>
</li>
<li><a class="bottom" href="#url">Lens Brush</a></li>
</ul>
</li>
<li class="drop right"><a class="main down top" href="#url">Outlets</a>
<ul>
<li><a href="#url">Support</a></li>
<li><a href="#url">Buying</a></li>
<li><a href="#url">Photographers</a></li>
<li class="fly"><a class="main" href="#url">Stockist</a>
<ul>
<li><a class="top2" href="#url">Currys</a></li>
<li><a href="#url">Dixons</a></li>
<li><a href="#url">Jessops</a></li>
<li><a class="bottom" href="#url">Staples</a></li>
</ul>
</li>
<li><a href="#5">General</a></li>
<li class="fly"><a class="main bottom" href="#url">Sales</a>
<ul>
<li><a class="top2" href="#url">USA</a></li>
<li><a href="#url">CANADA</a></li>
<li><a href="#url">South America</a></li>
<li class="fly"><a class="main" href="#url">Europe</a>
<ul>
<li><a class="top2" href="#url">Britain</a></li>
<li><a href="#url">France</a></li>
<li><a href="#url">Germany</a></li>
<li><a href="#url">Spain</a></li>
<li><a class="bottom" href="#url">Italy</a></li>
</ul>
</li>
<li><a href="#url">Australia</a></li>
<li><a class="bottom" href="#url">Asia</a></li>
</ul>
</li>
</ul>
</li>
<li class="drop"><a class="main top" href="#url">Privacy Policy</a></li>
</ul>
</div>
 
 
<div align="center"> </div>

</body>
</html>

纯CSS实现的多级下拉鼠标点击显示导航菜单代码

来源：邦林织梦（微信/QQ号：909912499），欢迎分享本文，转载请保留出处！部分内容来自网络，如有侵权请联系删除处理！

邦林织梦

热门文章

纯CSS实现的多级下拉鼠标点击显示导航菜单代码

相关信息

关于本站

联系我们

友情链接