横向三级展开的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 <style>
  6 #nav, 
  7 #nav ul {float:left; padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#cea #9b7 
  8 
  9 #8a6 #deb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
 10 #nav li li {background:#fff;}
 11 * html #nav li {float:left;}
 12 #nav li a {display:block; color:#888; margin:0 25px 0 10px; height:20px; line-height:20px; text-decoration:none; white-space:nowrap;}
 13 #nav li:hover {position:relative; z-index:300;}
 14 #nav ul {position:absolute; left:-9999px; top:-9999px;}
 15 * html #nav, * html nav ul {width:1px;}
 16 #nav li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
 17 #nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
 18 #nav li:hover > a {text-decoration:underline; color:#7b5;}
 19 #nav li:hover ul,
 20 #nav li:hover li:hover ul,
 21 #nav li:hover li:hover li:hover ul,
 22 #nav li:hover li:hover li:hover li:hover ul,
 23 #nav li:hover li:hover li:hover li:hover li:hover ul
 24 {left:-15px; margin-left:100%; top:-1px;}
 25 #nav li:hover ul ul,
 26 #nav li:hover li:hover ul ul,
 27 #nav li:hover li:hover li:hover ul ul,
 28 #nav li:hover li:hover li:hover li:hover ul ul
 29 {position:absolute; left:-9999px; top:-9999px;}
 30 #nav li:hover a,
 31 #nav li:hover li:hover a,
 32 #nav li:hover li:hover li:hover a,
 33 #nav li:hover li:hover li:hover li:hover a,
 34 #nav li:hover li:hover li:hover li:hover li:hover a,
 35 #nav li:hover li:hover li:hover li:hover li:hover li:hover a
 36 {text-decoration:underline; color:#7b5;}
 37 #nav li:hover li a,
 38 #nav li:hover li:hover li a,
 39 #nav li:hover li:hover li:hover li a,
 40 #nav li:hover li:hover li:hover li:hover li a,
 41 #nav li:hover li:hover li:hover li:hover li:hover li a
 42 {text-decoration:none; color:#888;}
 43 </style>
 44 <script type="text/javascript">
 45 stuHover = function() {
 46     var cssRule;
 47     var newSelector;// http://www.webdm.cn
 48     for (var i = 0; i < document.styleSheets.length; i++)
 49         for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
 50             {
 51             cssRule = document.styleSheets[i].rules[x];
 52             if (cssRule.selectorText.indexOf("LI:hover") != -1)
 53             {
 54                  newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
 55                 document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
 56             }
 57         }
 58     var getElm = document.getElementById("nav").getElementsByTagName("LI");
 59     for (var i=0; i<getElm.length; i++) {
 60         getElm[i].onmouseover=function() {
 61         this.className+=" iehover";
 62         }
 63         getElm[i].onmouseout=function() {
 64         this.className=this.className.replace(new RegExp(" iehover\\b"), "");
 65         }
 66     }
 67 }
 68 if (window.attachEvent) window.attachEvent("onload", stuHover);
 69 </script>
 70 </head>
 71 <body>
 72 <ul id="nav">
 73 <li><a href="#nogo">Home</a></li>
 74 <li><a href="#nogo">About us &#187;</a>
 75     <ul>
 76         <li><a href="#nogo">Who we are</a></li>
 77         <li><a href="#nogo">What we do</a></li>
 78     </ul>
 79 </li>
 80 <li><a href="#nogo">Products &#187;</a>
 81     <ul>
 82     <li><a href="#nogo">Tripods &#187;</a>
 83         <ul>
 84             <li><a href="#nogo">Monopods</a></li>
 85             <li><a href="#nogo">Adjutable head</a></li>
 86             <li><a href="#nogo">Fixed</a></li>
 87 
 88         </ul>
 89     </li>
 90     <li><a href="#nogo">Films &#187;</a>
 91         <ul>
 92             <li><a href="#nogo">35mm</a></li>
 93             <li><a href="#nogo">Color Print</a></li>
 94             <li><a href="#nogo">Color Slide</a></li>
 95         </ul>
 96     </li>
 97     <li><a href="#nogo">Cameras &#187;</a>
 98             <ul>
 99             <li><a href="#nogo">Compact &#187;</a>
100                 <ul>
101                 <li><a href="#nogo">Canon</a></li>
102                 <li><a href="#nogo">Nikon</a></li>
103                 </ul>
104             </li>
105             <li><a href="#nogo">Digital &#187;</a>
106                     <ul>
107                     <li><a href="#nogo">Canon</a></li>
108                     <li><a href="#nogo">Nikon &#187;</a>
109                             <ul>
110                             <li><a href="#nogo">Lenses &#187;</a>
111                                 <ul>
112                                     <li><a href="#nogo">Standard</a></li>
113                                     <li><a href="#nogo">Macro</a></li>
114                                 </ul>
115                             </li>
116                             <li><a href="#nogo">Speedlight</a></li>
117                             <li><a href="#nogo">Coolpix &#187;</a>
118                                     <ul>
119                                     <li><a href="#nogo">Coolpix S10</a></li>
120                                     <li><a href="#nogo">Coolpix S500</a></li>
121                                     </ul>
122                             </li>
123                             <li><a href="#nogo">D200</a></li>
124                             <li><a href="#nogo">D80</a></li>
125                             </ul>
126                     </li>
127                     <li><a href="#nogo">Minolta</a></li>
128                     <li><a href="#nogo">Pentax</a></li>
129                     </ul>
130             </li>
131             <li><a href="#nogo">SLR &#187;</a>
132                 <ul>
133                 <li><a href="#nogo">Canon</a></li>
134                 <li><a href="#nogo">Nikon</a></li>
135                 </ul>
136             </li>
137             </ul>
138       </li>
139     <li><a href="#nogo">Flash</a></li>
140     <li><a href="#nogo">Video</a></li>
141     </ul>
142   </li>
143 <li><a href="#nogo">FAQs &#187;</a>
144     <ul>
145         <li><a href="#nogo">Cameras</a></li>
146         <li><a href="#nogo">Film types</a></li>
147     </ul>
148 </li>
149 <li><a href="#nogo">Privacy &#187;</a>
150     <ul>
151         <li><a href="#nogo">Privacy Policy</a></li>
152         <li><a href="#nogo">Privacy Statement</a></li>
153     </ul>
154 </li>
155 <li><a href="#nogo">Contact us</a></li>
156 </ul>
157 </body>
158 </html>
159 <br>
160 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/0a7cdbce-2131-4e1d-a662-f65f3dc97738.html