一次偶然而無聊的實驗，發現了這樣的寫下拉式功能表的方式。完成作品後的愉悅心情，就像阿基米德泡浴缸卻發現了浮力原理！
NAME:Stupid CAT Pull-down Menu v1.0
SUPPORT:Ie(√) Firefox(√)
STANDARD:XHTML 1.0 Strict / CSS2.0
核心樣式：
複製代碼 代碼如下:
html,body{
background:#000000;
height:100%;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333333;
margin:20px auto;
overflow:hidden;
text-align:center;}
/*菜單容器menu*/
div#menu{
width:100%;
height:34px;
padding:0px 0px 0px 5px;}
/*一級菜單*/
div#menu div{
width:125px;
height:20px;
float:left;
text-transform:capitalize;
background:#cccccc;
padding:5px 0px 0px 0px;
margin:4px 1px 0px 0px;}
/*二級菜單*/
div#menu div div{
width:125px;
height:20px;
border-bottom:1px #333333 solid;
background:#666666;
margin-top:-4px;
cursor:pointer;
display:none;}
/*二級菜單中特殊樣式（可選）*/
div#menu div div.div1{
margin-top:3px;
border-top:1px #333333 solid;}
核心代碼：
複製代碼 代碼如下:
var menuItem=document.getElementById("menu").getElementsByTagName("div");
for(i=0;i<menuItem.length;i++){
menuItem[i].onmouseover=function(){
var subMenu=this.getElementsByTagName("div");
for(j=0;j<subMenu.length;j++){
subMenu[j].style.display="block";
subMenu[j].onmouseover=function(){this.style.background="#999999";this.style.color="#000000";};
subMenu[j].onmouseout=function(){this.style.background="#666666";this.style.color="#333333";};}
this.style.background="#666666"};
menuItem[i].onmouseout=function(){
var subMenu=this.getElementsByTagName("div");
for(j=0;j<subMenu.length;j++){
subMenu[j].style.display="none";}
this.style.background="#cccccc"};
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Author:Stupid CAT ICQ:278306428 BLOG:http://blog.sina.com.cn/u/1234091924 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stupid CAT" /> <title>Stupid CAT Pull-down Menu v1.0</title> <style type="text/css"> html,body{ background:#000000; height:100%; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; margin:20px auto; overflow:hidden; text-align:center;} /*菜單容器menu*/ div#menu{ width:100%; height:34px; padding:0px 0px 0px 5px;} /*一級菜單*/ div#menu div{ width:125px; height:20px; float:left; text-transform:capitalize; background:#cccccc; padding:5px 0px 0px 0px; margin:4px 1px 0px 0px;} /*二級菜單*/ div#menu div div{ width:125px; height:20px; border-bottom:1px #333333 solid; background:#666666; margin-top:-4px; cursor:pointer; display:none;} /*二級菜單中特殊樣式（可選）*/ div#menu div div.div1{ margin-top:3px; border-top:1px #333333 solid;} </style> </head> <body> <div id="menu"> <div>menu item1<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> <div>menu item2<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> <div>menu item3<div class="div1">sub menu1</div><div>sub menu2</div></div> <div>menu item4<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> <div>menu item5<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> <div>menu item6<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> </div> <script type="text/javascript"> var menuItem=document.getElementById("menu").getElementsByTagName("div"); for(i=0;i<menuItem.length;i++){ menuItem[i].onmouseover=function(){ var subMenu=this.getElementsByTagName("div"); for(j=0;j<subMenu.length;j++){ subMenu[j].style.display="block"; subMenu[j].onmouseover=function(){this.style.background="#999999";this.style.color="#000000";}; subMenu[j].onmouseout=function(){this.style.background="#666666";this.style.color="#333333";};} this.style.background="#666666"}; menuItem[i].onmouseout=function(){ var subMenu=this.getElementsByTagName("div"); for(j=0;j<subMenu.length;j++){ subMenu[j].style.display="none";} this.style.background="#cccccc"}; } </script> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
