兼容性超强的六级网站导航主菜单_网页代码站(www.webdm.cn)

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

转载于:https://www.cnblogs.com/webdm/archive/2010/12/24/1915625.html