1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <title>兼容性超强的六级网站导航主菜单_网页代码站(www.webdm.cn)</title>
5 <style>
6 .preload1 {background: url(http://www.webdm.cn/images/20090910/blank_over.gif);}
7 .preload2 {background: url(http://www.webdm.cn/images/20090910/blank_overa.gif);}
8 #nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-
9
10 serif;}
11 #nav li.top {display:block; float:left;}
12 #nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-
13
14 weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://www.webdm.cn/images/20090910/blank.gif);}
15 #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url
16
17 (http://www.webdm.cn/images/20090910/blank.gif) right top;}
18 #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url
19
20 (http://www.webdm.cn/images/20090910/blanka.gif) no-repeat right top;}
21 #nav li a.top_link:hover {color:#fff; background: url(http://www.webdm.cn/images/20090910/blank_over.gif) no-repeat;}
22 #nav li a.top_link:hover span {background:url(http://www.webdm.cn/images/20090910/blank_over.gif) no-repeat right top;}
23 #nav li a.top_link:hover span.down {background:url(http://www.webdm.cn/images/20090910/blank_overa.gif) no-repeat right top;}
24 #nav li:hover > a.top_link {color:#fff; background: url(http://www.webdm.cn/images/20090910/blank_over.gif) no-repeat;}
25 #nav li:hover > a.top_link span {background:url(http://www.webdm.cn/images/20090910/blank_over.gif) no-repeat right top;}
26 #nav li:hover > a.top_link span.down {background:url(http://www.webdm.cn/images/20090910/blank_overa.gif) no-repeat right top;}
27 #nav li:hover {position:relative; z-index:200;}
28 #nav ul,
29 #nav li:hover ul ul,
30 #nav li:hover ul li:hover ul ul,
31 #nav li:hover ul li:hover ul li:hover ul ul,
32 #nav li:hover ul li:hover ul li:hover ul li:hover ul ul
33 {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
34 #nav li:hover ul.sub
35 {left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
36 #nav li:hover ul.sub li
37 {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
38 #nav li:hover ul.sub li a
39 {display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
40 #nav li ul.sub li a.fly{background:#fff url(http://www.webdm.cn/images/20090910/arrow.gif) 80px 7px no-repeat;}
41 #nav li:hover ul.sub li a:hover {background:#3a93d2; color:#fff;}
42 #nav li:hover ul.sub li a.fly:hover{background:#3a93d2 url(http://www.webdm.cn/images/20090910/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
43 #nav li:hover ul li:hover > a.fly {background:#3a93d2 url(http://www.webdm.cn/images/20090910/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
44 #nav li:hover ul li:hover ul,
45 #nav li:hover ul li:hover ul li:hover ul,
46 #nav li:hover ul li:hover ul li:hover ul li:hover ul,
47 #nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
48 {left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
49 </style>
50 <script type="text/javascript">
51 stuHover = function() {
52 var cssRule;
53 var newSelector;
54 for (var i = 0; i < document.styleSheets.length; i++)
55 for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
56 {
57 cssRule = document.styleSheets[i].rules[x];
58 if (cssRule.selectorText.indexOf("LI:hover") != -1)
59 {
60 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
61 document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
62 }
63 }
64 var getElm = document.getElementById("nav").getElementsByTagName("LI");
65 for (var i=0; i<getElm.length; i++) {
66 getElm[i].onmouseover=function() {
67 this.className+=" iehover";
68 }
69 getElm[i].onmouseout=function() {
70 this.className=this.className.replace(new RegExp(" iehover\\b"), "");
71 }
72 }
73 }
74 if (window.attachEvent) window.attachEvent("onload", stuHover);
75 </script>
76 </head>
77 <body>
78 <ul id="nav">
79 <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
80 <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
81 <ul class="sub">
82 <li><a href="#nogo3" class="fly">Cameras</a>
83 <ul>
84 <li><a href="#nogo4">Nikon</a></li>
85 <li><a href="#nogo5">Minolta</a></li>
86 <li><a href="#nogo6">Pentax</a></li>
87 </ul>
88 </li>
89 <li class="mid"><a href="#nogo7" class="fly">Lenses</a>
90 <ul>
91 <li><a href="#nogo8">Wide Angle</a></li>
92 <li><a href="#nogo9">Standard</a></li>
93 <li><a href="#nogo10">Telephoto</a></li>
94 <li><a href="#nogo11" class="fly">Zoom</a>
95 <ul>
96 <li><a href="#nogo12">35mm to 125mm</a></li>
97 <li><a href="#nogo13">50mm to 250mm</a></li>
98 <li><a href="#nogo14">125mm to 500mm</a></li>
99 </ul>
100 </li>
101 <li><a href="#nogo15">Mirror</a></li>
102 <li><a href="#nogo16" class="fly">Non standard</a>
103 <ul>
104 <li><a href="#nogo17">Bayonet mount</a></li>
105 <li><a href="#nogo18">Screw mount</a></li>
106 </ul>
107 </li>
108 </ul>
109 </li>
110 <li><a href="#nogo19">Flash Guns</a></li>
111 </ul>
112 </li>
113 <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
114 <ul class="sub">
115 <li><a href="#nogo23">Printing</a></li>
116 <li><a href="#nogo25">Retouching</a></li>
117 </ul>
118 </li>
119 <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
120 <ul class="sub">
121 <li><a href="#nogo28">Support</a></li>
122 <li><a href="#nogo29" class="fly">Sales</a>
123 <ul>
124 <li><a href="#nogo30">USA</a></li>
125 <li><a href="#nogo31">Canadian</a></li>
126 <li><a href="#nogo32">South American</a></li>
127 <li><a href="#nogo33" class="fly">European</a>
128 <ul>
129 <li><a href="#nogo34" class="fly">British</a>
130 <ul>
131 <li><a href="#nogo35">London</a></li>
132 <li><a href="#nogo36">Liverpool</a></li>
133 <li><a href="#nogo37">Glasgow</a></li>
134 <li><a href="#nogo38" class="fly">Bristol</a>
135 <ul>
136 <li><a href="#nogo39">Redland</a></li>
137 <li><a href="#nogo40">Hanham</a></li>
138 <li><a href="#nogo41">Eastville</a></li>
139 </ul>
140 </li>
141 <li><a href="#nogo42">Cardiff</a></li>
142 <li><a href="#nogo43">Belfast</a></li>
143 </ul>
144 </li>
145 <li><a href="#nogo44">French</a></li>
146 <li><a href="#nogo45">German</a></li>
147 <li><a href="#nogo46">Spanish</a></li>
148 </ul>
149 </li>
150 <li><a href="#nogo47">Australian</a></li>
151 <li><a href="#nogo48">Asian</a></li>
152 </ul>
153 </li>
154 <li><a href="#nogo49">Buying</a></li>
155 <li><a href="#nogo50">Photographers</a></li>
156 <li><a href="#nogo51">Stockist</a></li>
157 <li><a href="#nogo52">General</a></li>
158 </ul>
159 </li>
160 <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
161 <ul class="sub">
162 <li><a href="#nogo54">Online</a></li>
163 <li><a href="#nogo55">Catalogue</a></li>
164 <li><a href="#nogo56">Mail Order</a></li>
165 </ul>
166 </li>
167 <li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
168 </ul>
169 </body>
170 </html>
171
172 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/206ab363-b4d4-4bdf-b1e1-bf9435d22566.html