鼠标指向后向上展开的多级CSS菜单代码_网页代码站(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 > 鼠标指向后向上展开的多级CSS菜单代码_网页代码站(www.webdm.cn) </ title >
5 < meta name ="Author" content ="Stu Nicholls" />
6 < style >
7 #nav,
8 #nav ul { padding : 0 0 5px 0 ; margin : 0 ; list-style : none ; font : 10px verdana, sans-serif ; border : 1px solid #000 ; border-color : #ace #79b #68a #bde ;
9
10 border-width : 1px 2px 2px 1px ; background : #fff ; position : relative ; z-index : 200 ; }
11 #nav { height : 25px ; padding : 0 ; }
12
13 #nav li { float : left ; }
14 #nav li li { float : none ; background : #fff ; }
15 * html #nav li li { float : left ; }
16 #nav li a { display : block ; float : left ; color : #888 ; margin : 0 25px 0 10px ; height : 25px ; line-height : 25px ; text-decoration : none ; white-space : nowrap ; }
17 #nav li li a { height : 20px ; line-height : 20px ; float : none ; }
18 #nav li:hover { position : relative ; z-index : 300 ; }
19 #nav li:hover ul { left : 0 ; bottom : 21px ; top : auto ; }
20 * html #nav li:hover ul { left : 10px ; }
21 #nav ul { position : absolute ; left : -9999px ; top : -9999px ; }
22 * html #nav ul { width : 1px ; }
23 #nav li:hover li:hover > ul { left : -15px ; margin-left : 100% ; bottom : -7px ; top : auto ; }
24 #nav li:hover > ul ul { position : absolute ; left : -9999px ; top : -9999px ; width : auto ; }
25 #nav li:hover > a { text-decoration : underline ; color : #57b ; }
26 #nav li:hover li:hover ul,
27 #nav li:hover li:hover li:hover ul,
28 #nav li:hover li:hover li:hover li:hover ul,
29 #nav li:hover li:hover li:hover li:hover li:hover ul
30 { left : -15px ; margin-left : 100% ; bottom : -7px ; top : auto ; }
31 #nav li:hover ul ul,
32 #nav li:hover li:hover ul ul,
33 #nav li:hover li:hover li:hover ul ul,
34 #nav li:hover li:hover li:hover li:hover ul ul
35 { position : absolute ; left : -9999px ; top : -9999px ; }
36 #nav li:hover a,
37 #nav li:hover li:hover a,
38 #nav li:hover li:hover li:hover a,
39 #nav li:hover li:hover li:hover li:hover a,
40 #nav li:hover li:hover li:hover li:hover li:hover a,
41 #nav li:hover li:hover li:hover li:hover li:hover li:hover a
42 { text-decoration : underline ; color : #57b ; }
43 #nav li:hover li a,
44 #nav li:hover li:hover li a,
45 #nav li:hover li:hover li:hover li a,
46 #nav li:hover li:hover li:hover li:hover li a,
47 #nav li:hover li:hover li:hover li:hover li:hover li a
48 { text-decoration : none ; color : #888 ; }
49 </ style >
50 < script >
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
77 </ head >
78
79 < body >
80 < h2 > Skeleton pull up menu </ h2 >
81 < ul id ="nav" >
82 < li >< a href ="#nogo" > Home </ a ></ li >
83 < li >< a href ="#nogo" > About us &#187; </ a >
84 < ul >
85 < li >< a href ="#nogo" > Who we are </ a ></ li >
86 < li >< a href ="#nogo" > What we do </ a ></ li >
87 </ ul >
88 </ li >
89 < li >< a href ="#nogo" > Products &#187; </ a >
90 < ul >
91 < li >< a href ="#nogo" > Tripods &#187; </ a >
92 < ul >
93 < li >< a href ="#nogo" > Monopods </ a ></ li >
94 < li >< a href ="#nogo" > Tripods </ a ></ li >
95 < li >< a href ="#nogo" > Adjutable head </ a ></ li >
96 </ ul >
97 </ li >
98 < li >< a href ="#nogo" > Films &#187; </ a >
99 < ul >
100 < li >< a href ="#nogo" > 35mm </ a ></ li >
101 < li >< a href ="#nogo" > Color Print </ a ></ li >
102 </ ul >
103 </ li >
104 < li >< a href ="#nogo" > Cameras &#187; </ a >
105 < ul >
106 < li >< a href ="#nogo" > Compact &#187; </ a >
107 < ul >
108 < li >< a href ="#nogo" > Canon </ a ></ li >
109 < li >< a href ="#nogo" > Nikon </ a ></ li >
110 < li >< a href ="#nogo" > Pentax </ a ></ li >
111 </ ul >
112 </ li >
113 < li >< a href ="#nogo" > Digital &#187; </ a >
114 < ul >
115 < li >< a href ="#nogo" > Canon </ a ></ li >
116 < li >< a href ="#nogo" > Nikon &#187; </ a >
117 < ul >
118 < li >< a href ="#nogo" > Lenses &#187; </ a >
119 < ul >
120 < li >< a href ="#nogo" > Mirror </ a ></ li >
121 < li >< a href ="#nogo" > Macro </ a ></ li >
122 </ ul >
123 </ li >
124 < li >< a href ="#nogo" > Speedlight </ a ></ li >
125 < li >< a href ="#nogo" > Coolpix &#187; </ a >
126 < ul >
127 < li >< a href ="#nogo" > Coolpix S10 </ a ></ li >
128 < li >< a href ="#nogo" > Coolpix S500 </ a ></ li >
129 </ ul >
130 </ li >
131 < li >< a href ="#nogo" > D200 </ a ></ li >
132 < li >< a href ="#nogo" > D80 </ a ></ li >
133 </ ul >
134 </ li >
135 < li >< a href ="#nogo" > Minolta </ a ></ li >
136 < li >< a href ="#nogo" > Pentax </ a ></ li >
137 </ ul >
138 </ li >
139 < li >< a href ="#nogo" > SLR &#187; </ a >
140 < ul >
141 < li >< a href ="#nogo" > Canon </ a ></ li >
142 < li >< a href ="#nogo" > Nikon </ a ></ li >
143 < li >< a href ="#nogo" > Minolta </ a ></ li >
144 </ ul >
145 </ li >
146 </ ul >
147 </ li >
148 < li >< a href ="#nogo" > Flash </ a ></ li >
149 < li >< a href ="#nogo" > Video </ a ></ li >
150 </ ul >
151 </ li >
152 < li >< a href ="#nogo" > FAQs &#187; </ a >
153 < ul >
154 < li >< a href ="#nogo" > Cameras </ a ></ li >
155 < li >< a href ="#nogo" > Film types </ a ></ li >
156 </ ul >
157 </ li >
158 < li >< a href ="#nogo" > Privacy &#187; </ a >
159 < ul >
160 < li >< a href ="#nogo" > Privacy Policy </ a ></ li >
161 < li >< a href ="#nogo" > Privacy Statement </ a ></ li >
162 </ ul >
163 </ li >
164 < li >< a href ="#nogo" > Contact us </ a ></ li >
165 </ ul >
166 </ body >
167 </ html >
168 < br >
169 < a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

 

 

文章来自：http://www.webdm.cn/webcode/5ca95573-4363-4710-9755-9249d62c9de6.html

转载于:https://www.cnblogs.com/webdm/archive/2010/12/15/1906419.html