Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <ptml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><pead><meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" /><meta http-equiv="content-language" content="zh-cn" /><meta name="robots" content="all" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /><link rel="bookmark" href="/favicon.ico" type="image/x-icon" /><title>Div + CSS unlimited scale drop-down menu</title><style type="text/css"><!--*{margin:0;padding:0;}img{border:0;}body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}a:link{ color:#000; text-decoration:none; }a:visited{ color:#000; text-decoration:none; }a:hover{ color:#000; text-decoration:underline; }.menubg{ background: #356290; 0 -90px ; height: 29px;}.menu{ width: 920px; margin: auto;}.menusel{ float:left;width:131px; position:relative; height:29px; line-height:29px; *line-height: 30px;}.menusel h2{height:29px; font-family:"microsoft yahei"; position: relative; z-index: 9;}.menusel h2 a:link,.menusel h2 a:visited{ font-weight: 400; font-size: 14px; color: #fff;}.menusel h2 a:hover{ text-decoration: none;}.menusel a:link,.menusel a:visited{ width:131px; display: block; text-align:center; font-size: 14px;font-family:"microsoft yahei"; position:relative; z-index:2;}.menusel a:hover{ position:relative; z-index:2; height:25px;}.menusel div{ width:131px;position:absolute; z-index:1;margin-top: -1px;}.menusel ul{ width:131px; background:#356290; border:1px solid #2b5076;border-top:1px solid #356290;margin-top:0; position:relative; z-index:1; display:none;}.menusel .block{ display:block;}.menusel ul li{border-bottom:1px dashed #658fbc; position:relative; float:left; height: 26px;}.menusel ul li a{ border:none;}.menusel ul li a:link,.menusel ul li a:visited,.typeul li a:visited{font-size: 12px;height: 26px; color: #fff;}.menusel ul li a:hover{background:#2b4e73;font-size: 14px; color: #fff;height: 26px;line-height: 26px;}.menusel ul{ margin-left:0; }.menusel ul li ul{left:131px; top:-1px; position:absolute;}.menusel .lli{ border:none; }.h2hover{ background: #356290; center no-repeat;height: 26px;}.h2hover a:link,.h2hover a:visited{ color: black!important ;}--></style></pead><body><!--menubg start--><div class="menubg"><!--menu start--><div class="menu"><!-- menu1 start --><div id="menu1" class="menusel"><p>I am menu 1</p><div> <!--1 start--><ul><li>Level 1-1 01</li><li>One by one 02<!--2 start--><ul><li>222nd menu 01</li><li>222nd menu 02<!--3 start--><ul><li>33333333_01</li><li>33333333_02<!--4 start--><ul><li>01 in level 1 Menu</li><li>02 in the 4444 menu<!--5 start--><ul><li>This is Level 5 menu</li></ul><!--5 end--></li></ul><!--4 end--></li><li>33333333_03</li></ul><!--3 end--></li><li>222nd menu 03</li><li>222nd menu 04</li></ul><!--2 start--></li><li>Level 1-1 03</li><li>Level 1-1 04</li><li>Level 1-1 05</li></ul><!--1 end--></div></div><!-- menu1 end --><!-- menu2 start --><div id="menu2" class="menusel"><p>I am menu 2</p><div><ul><li>Game Business Department</li><li>Game Development Team</li><li>Game Business Department</li><li>Overseas Business Unit</li></ul></div></div><!-- menu2 end --><!-- menu3 start --><div id="menu3" class="menusel"><p>I am menu 3</p><div><ul> <li>Commercial and Technical Cooperation</li><li>Website combination</li><li>Customer Service Center</li></ul></div></div><!-- menu3 end --><!-- menu4 start --><div id="menu4" class="menusel"><p>I am menu 4</p><div><ul><li>Company status</li><li>Development calendar</li><li>Publish progress</li><li>His new news</li></ul></div></div><!-- menu4 end --><!-- menu5 start --><div id="menu5" class="menusel"><p>I am menu 5</p><div><ul><li>Our wish</li><li>Brand battles</li><li>Company logo</li></ul></div></div><!-- menu5 end --><!-- menu6 start --><div id="menu6" class="menusel"><p>I'm menu 6</p><div><ul><li>Recruitment</li><li>School recruitment</li><li>Recruitment now</li><li>Submit a simple calendar</li></ul></div></div><!-- menu6 end --><!-- menu7 start --><div id="menu7" class="menusel"><p>I am from menu 7</p><div><ul><li>Website customer service</li><li>Game customer service</li></ul></div></div><!-- menu7 end --></div><!-- menu end--></div><!-- menubg end--><script type="text/javascript">For (var x = 1; x <8; x ++) {var menuid = document. getElementById ("menu" + x); type ();} function type () {var menuh2 = menuid. getElementsByTagName ("h2"); var divs = menuid. getElementsByTagName ("div"); var alluls = divs [0]. getElementsByTagName ("ul"); var menuli = alluls [0]. getElementsByTagName ("li"); menuh2 [0]. onmouseover = show; menuh2 [0]. onmouseout = unshow; alluls [0]. onmouseover = show; alluls [0]. onmouseout = unshow; function show () {alluls [0]. className = "clearfix block"/* menuul [0]. lastChild. className = "lli"; */function getChildRen (x) {var arry = new Array; var c = x. childNodes; for (var I = 0; I <c. length; I ++) {if (c [I]. nodeType = 1) {arry. push (c [I]) }}return arry;} for (var I = 0; I <alluls. length; I ++) {var OK = getChildRen (alluls [I]); OK [OK. length-1]. className = "lli";}/* alert (alluls [0]. offsetHeight) */menuh2 [0]. className = "h2hover"} function unshow () {alluls [0]. className = "" menuh2 [0]. className = ""} for (var I = 0; I <menuli. length; I ++) {menuli [I]. num = I; var liul = menuli [I]. getElementsByTagName ("ul") [0]; if (liul) {typeshow ()} function typeshow () {menuli [I]. onmouseover = showul; menuli [I]. onmouseout = unshowul;} function showul () {menuli [this. num]. getElementsByTagName ("ul") [0]. className = "block"; menuli [this. num]. getElementsByTagName ("ul") [0]. lastChild. className = "lli";} function unshowul () {menuli [this. num]. getElementsByTagName ("ul") [0]. className = "";}}</script></body></ptml></td> </tr></table>
Tip: you can modify some code before running
