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

NAME:StupidCATPull-downMenuv1.0

SUPPORT:Ie(√)Firefox(√)

STANDARD:XHTML1.0Strict/CSS2.0

核心样式：

复制代码 代码如下:

html,body{

background:#000000;

height:100%;

font-size:12px;

font-family:Arial,Helvetica,sans-serif;

color:#333333;

margin:20pxauto;

overflow:hidden;

text-align:center;}

/*菜单容器menu*/

div#menu{

width:100%;

height:34px;

padding:0px0px0px5px;}

/*一级菜单*/

div#menudiv{

width:125px;

height:20px;

float:left;

text-transform:capitalize;

background:#cccccc;

padding:5px0px0px0px;

margin:4px1px0px0px;}

/*二级菜单*/

div#menudivdiv{

width:125px;

height:20px;

border-bottom:1px#333333solid;

background:#666666;

margin-top:-4px;

cursor:pointer;

display:none;}

/*二级菜单中特殊样式（可选）*/

div#menudivdiv.div1{

margin-top:3px;

border-top:1px#333333solid;}

核心代码：

复制代码 代码如下:

varmenuItem=document.getElementById("menu").getElementsByTagName("div");

for(i=0;i<menuItem.length;i++){

menuItem[i].onmouseover=function(){

varsubMenu=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(){

varsubMenu=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 item1sub menu1sub menu2sub menu3sub menu4 menu item2sub menu1sub menu2sub menu3 menu item3sub menu1sub menu2 menu item4sub menu1sub menu2sub menu3sub menu4 menu item5sub menu1sub menu2sub menu3 menu item6sub menu1sub menu2sub menu3

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

【用简单的脚本实现一款漂亮的下拉菜单】相关文章：

★ jQuery使用zTree插件实现树形菜单和异步加载

★ javascript基于DOM实现省市级联下拉框的方法

★ javascript制作的滑动图片菜单

★ javascript实现控制的多级下拉菜单

★ js实现精美的银灰色竖排折叠菜单

★ javascript用函数实现对象的方法

★ 简单实用的网页表格特效

★ JS实现简洁、全兼容的拖动层实例

★ js脚本学习 比较实用的基础

★ javascript实现Table间隔色以及选择高亮的方法