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

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

　　}