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 »</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 »</a>
90 <ul>
91 <li><a href="#nogo">Tripods »</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 »</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 »</a>
105 <ul>
106 <li><a href="#nogo">Compact »</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 »</a>
114 <ul>
115 <li><a href="#nogo">Canon</a></li>
116 <li><a href="#nogo">Nikon »</a>
117 <ul>
118 <li><a href="#nogo">Lenses »</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 »</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 »</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 »</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 »</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