Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Green multi-level drop-down menu compatible with various browsers</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css"># Nav {padding: 0; margin: 0; list-style: none; height: 38px; background: # fff url (yun_qi_img/20100818183544.gif) repeat-x; position: relative; z-index: 500;} # nav li. top {display: block; float: left; height: 38px ;}# nav li. top_link {display: block; float: left; height: 35px; line-height: 33px; color: # ccc; text-decoration: none; font-size: 12px; font-weight: bold; padding: 0 0 12px; cursor: pointer; background: url (yun_qi_img/201008183544.gif);} # nav li. top_link span {float: left; display: block; padding: 0 24px 0 12px; height: 35px; background: url (yun_qi_img/20100818183544.gif) right top no-repeat ;} # nav li. top_link span. down {float: left; display: block; padding: 0 24px 0 12px; height: 35px; background: url (yun_qi_img/201008183814.gif) no-repeat right top;} # nav li: hover. top_link {color: # fff; background: url (yun_qi_img/20100818183913.gif) no-repeat;} # nav li: hover. top_link span {background: url (yun_qi_img/201008183913.gif) no-repeat right top ;}# nav li: hover. top_link span. down {background: url (yun_qi_img/201008183814.gif) no-repeat right top;}/* Default list styling */# nav li: hover {position: relative; z-index: 200 ;} # nav li: hover ul. sub {left: 1px; top: 38px; background: # bbd37e; padding: 3px; border: 1px solid # 5c731e; white-space: nowrap; width: 90px; height: auto; z-index: 300;} # nav li: hover ul. sub li {display: block; height: 20px; position: relative; float: left; width: 90px; font-weight: normal ;}# nav li: hover ul. sub li a {display: block; font-size: 12px; height: 18px; width: 88px; line-height: 18px; text-indent: 5px; color: #000; text-decoration: none; border: 1px solid # bbd37e;} # nav li ul. sub li. fly {background: # bbd37e url (/blog/upload/image/201008184008.gif) 80px 6px no-repeat;} # nav li: hover ul. sub li a: hover {background: # 6a812c; color: # fff; border-color: # fff ;}# nav li: hover ul. sub li. fly: hover {background: # 6a812c url (/blog/upload/image/201008184042.gif) 80px 6px no-repeat; color: # fff ;}# nav li: hover ul, # nav li: hover ul, # nav li: hover ul, # nav li: hover li: hover li: hover ul {left: 90px; top:-4px; background: # bbd37e; padding: 3px; border: 1px solid # 5c731e; white-space: nowrap; width: 90px; z-index: 400; height: auto;} # nav ul, # nav li: hover ul, # nav li: hover ul, # nav li: hover ul, # nav li: hover ul {position: absolute; left:-9999px; top:-9999px; width: 0; height: 0; margin: 0; padding: 0; list-style: none ;}# nav li: hover. fly, # nav li: hover. fly, # nav li: hover. fly, # nav li: hover. fly {background: # 6a812c url (/blog/upload/image/201008184042.gif) 80px 6px no-repeat; color: # fff; border-color: # fff;} # nav li: hover li: hover li. fly, # nav li: hover li. fly, # nav li: hover li. fly {background: # bbd37e url (/blog/upload/image/201008184042.gif) 80px 6px no-repeat; color: #000; border-color: # bbd37e ;}</style><script type="text/javascript">StuHover = function () {var cssRule; var newSelector; for (var I = 0; I <document. styleSheets. length; I ++) for (var x = 0; x <document. styleSheets [I]. rules. length; x ++) {cssRule = document. styleSheets [I]. rules [x]; if (cssRule. selectorText. indexOf ("LI: hover ")! =-1) {newSelector = cssRule. selectorText. replace (/LI: hover/gi, "LI. iehover "); document. styleSheets [I]. addRule (newSelector, cssRule.style.css Text);} var getElm = document. getElementById ("nav "). getElementsByTagName ("LI"); for (var I = 0; I<getElm.length; i++) {getElm[i].onmouseover=function() {this.className+=" iehover";}getElm[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", stuHover);</script></head><body><!--把下面代码加到<body>与</body>之间--><ul id="nav"><li class="top">Homepage</li><li class="top">Product Center<ul class="sub"><li>Cameras<ul><li>Nikon</li><li>Minolta</li><li>Pentax</li></ul></li><li class="mid">Lenses<ul><li>Wide Angle</li><li>Standard</li><li>Telephoto</li><li>Zoom<ul><li>35 to 125</li><li>50 to 250</li><li>125 to 500</li></ul></li><li>Mirror</li><li>Non standard<ul><li>Bayonet mount</li><li>Screw mount</li></ul></li></ul></li><li>Flash Guns</li><li>Tripods</li><li>Filters</li></ul></li><li class="top">Customer Service Center<ul class="sub"><li>Printing</li><li>Photo Framing</li><li>Retouching</li><li>Archiving</li></ul></li><li class="top">About Us<ul class="sub"><li>Support</li><li>Sales<ul><li>USA</li><li>Canadian</li><li>South American</li><li>European<ul><li>British<ul><li>London</li><li>Liverpool</li><li>Glasgow</li><li>Bristol<ul><li>Redland</li><li>Hanham</li><li>Eastville</li></ul></li><li>Cardiff</li><li>Belfast</li></ul></li><li>French</li><li>German</li><li>Spanish</li></ul></li><li>Australian</li><li>Asian</li></ul></li><li>Buying</li><li>Photographers</li><li>Stockist</li><li>General</li></ul></li><li class="top">Product Mall<ul class="sub"><li>Online</li><li>Catalogue</li><li>Mail Order</li></ul></li><li class="top">Design Forum</li></ul></body></html>
Tip: you can modify some code before running
