js css实现超简洁的二级下拉菜单效果代码

本文实例讲述了js css实现超简洁的二级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一个很简洁的CSS JavaScript二级菜单，没有使用过多的修饰素材，尽量不调用外部图片，简洁大方，而且便于二级开发完善，最初是一个政府网站上的菜单。

运行效果截图如下：

在线演示地址如下：

http://演示。jb51。net/js/2015/js-CSS-simple-2jxl-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题二级下拉菜单/title style type=' text/CSS '/* # 193 B5F栏目字体颜色*/* { margin :0；划水：0 }车身{ width :960 pxmargin :20 px汽车；font-size :14 px}/*导航条*/# nav {底色：蓝色；color : # fffh three :25 px线高：25 px文本对齐：居中；列表式：无；} # nav a { color : # fff } # nav Li { width :75 pxfloat : left位置：相对；z索引：1;} #李导航标题{ display:block} #导航李。标题：悬停{背景色：绿色；} #李导航。子菜单{ width :75 pxmargin :0 auto背景：绿色；位置：绝对；left :0 top :25 pxdisplay : none } #李导航。子菜单dd{border-top:1px虚线# DDD color : # fff }/style/head dyul id=' nav '！-有二级菜单的，给里加class='menu '没有的不用加-李国家政务/a dl类='子菜单dda href='# '时政要闻/a/dd dda href='# '远程党教/a/dd dda href='# '村务管理/a/dd /dl /li阿利网络服务/a /li li "菜单"信息交流/a dl类='子菜单dda href='# '求购信息/a/dd dda href='# '转让信息/a/dd /dl /li/div！-结束导航-脚本类型='text/javascript '！-var nav=文档。getelementbyid(' nav ').childnodeffor(var I=0；inav.lengthi ){ if (nav[i]).菜单){ nav[i].onmouseover=function(){ fnNav(this，' block ')}；导航[i].onmouseout=function(){ fnNav(this，' none ')}；} }函数fnNav(obj，flag){ obj。getelementsbytagname(' dl ')[0]。风格。display=标志；}/////脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。