鼠标指向后向上展开的多级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

posted @ 2010-12-15 10:57  网页代码站  阅读(399)  评论(0)  编辑  收藏  举报