用简单的脚本实现一款漂亮的下拉菜单

一次偶然而无聊的实验，发现了这样的写下拉菜单的方式。完成作品后的愉悦心情，就像阿基米德泡浴缸却发现了浮力原理！

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"};
    }

Stupid CAT Pull-down Menu v1.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;}

menu item1

sub menu1

sub menu2

sub menu3

sub menu4

menu item2

sub menu1

sub menu2

sub menu3

menu item3

sub menu1

sub menu2

menu item4

sub menu1

sub menu2

sub menu3

sub menu4

menu item5

sub menu1

sub menu2

sub menu3

menu item6

sub menu1

sub menu2

sub menu3

var menuItem=document.getElementById("menu").getElementsByTagName("div");
for(i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]