本文实例讲述了JS CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：

这是一款半铸钢钢性铸铁(铸造半钢)配合Java脚本语言实现二级下拉导航菜单，好像半铸钢钢性铸铁(铸造半钢)要配合射流研究…才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-CSS-simple-2l-淡入淡出-菜单-代码/

具体代码如下：

！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 '标题CSS二级下拉导航菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS '正文，html { padding:0margin:0文本对齐：居中；font : normal 14px ' arial } # mainnavtar { width :100%；背景技术： # 999;padd :10 px 0；} # nav { width:760px高度：30 pxmargin :0 auto } # nav ul { padd :0 margin :0 } # nav ul Li {位置：相对；float:left宽度：60 px高度：30 px线高：30 px飞越：隐藏；列表样式-:型无；} #导航ul阿利{ display : blockcolor : # fff文本装饰：无；} # nav ul阿利：悬停{ font-weight : bold；背景技术： # 666;} # subNav {位置：绝对值；宽度宽度：150 pxtop :30 pxleft :0 pxpadding :5 px背景技术： # 666;color : # ffft ext-左对齐：} # subNav a { text-decoration : none；字体粗细：正常；显示：块；} # SunAv a :悬停{ color : # f00背景技术# f00 }/style/head dydiv id=' mainNavBar ' div id=' nav ' ul阿利href='# '添加/a div id=' SunNav ' a href=' # '日志/a a href='# '分类/a /div /li阿利管理/a div id=' SunNav ' a href=' # '分类/a a href='# '文章/a /div /li阿利扩展/a div id=' SunNav ' a href=' # '评论管理/a a href='# '留言管理/a a href='# '注销退出/a/div/Li/ul/div/div脚本语言=' JavaScript ' var nav=document。getelementbyid(' nav ').getElementsByTagName(' Li ')；for(I=0；inav . lentigi){ nav[I].onmouseover=function(){ this。风格。字体粗细='粗体'；this.style.overflow="可见";这个。风格。背景=' # 666666 '；}导航[i].onmouseout=function(){ this。风格。字体粗细='正常'；这个。风格。背景=' # 999999 '这个。风格。溢出='隐藏'；} }/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。