提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><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的無限級擴充下拉式功能表</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></head><body><!--menubg start--><div class="menubg"><!--menu start--><div class="menu"><!-- menu1 start --><div id="menu1" class="menusel"><h2>我是菜單1</h2><div> <!--1 start--><ul><li>一一一級 01</li><li>一一一級 02<!--2 start--><ul><li>第222菜單 01</li><li>第222菜單 02<!--3 start--><ul><li>33333333_01</li><li>33333333_02<!--4 start--><ul><li>4444級菜單裡的01</li><li>4444級菜單裡的02<!--5 start--><ul><li>這個是第五級菜單</li></ul><!--5 end--></li></ul><!--4 end--></li><li>33333333_03</li></ul><!--3 end--></li><li>第222菜單 03</li><li>第222菜單 04</li></ul><!--2 start--></li><li>一一一級 03</li><li>一一一級 04</li><li>一一一級 05</li></ul><!--1 end--></div></div><!-- menu1 end --><!-- menu2 start --><div id="menu2" class="menusel"><h2>我是菜單2</h2><div><ul><li>遊戲業務部</li><li>遊戲開發組</li><li>遊戲事業部</li><li>海外事業部</li></ul></div></div><!-- menu2 end --><!-- menu3 start --><div id="menu3" class="menusel"><h2>我是菜單3</h2><div><ul> <li>商業技術合作</li><li>網 站 合 作</li><li>客戶服務中心</li></ul></div></div><!-- menu3 end --><!-- menu4 start --><div id="menu4" class="menusel"><h2>我是菜單4</h2><div><ul><li>公 司 動 態</li><li>發 展 曆 程</li><li>開 發 進 度</li><li>其 他 新 聞</li></ul></div></div><!-- menu4 end --><!-- menu5 start --><div id="menu5" class="menusel"><h2>我是菜單5</h2><div><ul><li>我們的憬願</li><li>品 牌 戰 略</li><li>公 司 標 志</li></ul></div></div><!-- menu5 end --><!-- menu6 start --><div id="menu6" class="menusel"><h2>我是菜單6</h2><div><ul><li>社 會 招 聘</li><li>校 園 招 聘</li><li>現 場 招 聘</li><li>投 遞 簡 曆</li></ul></div></div><!-- menu6 end --><!-- menu7 start --><div id="menu7" class="menusel"><h2>我是菜單7</h2><div><ul><li>網站客戶服務</li><li>遊戲客戶服務</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></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
