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

本文实例讲述了射流研究…实现简洁大方的二级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款简洁大方的二级下拉菜单，菜单的颜色自己根据需要重新定义吧，这里仅给大家提供一种制作二级菜单的思路，整体效果看上去相当实用，下拉导航菜单也是大家比较常用的。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-simple-2级-显示-下拉菜单-代码/

具体代码如下：

！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 meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' * { margin :0；划水：0;字体样式：正常；字体系列：宋体；}正文{ text-align :居中；font-size :14 px} #内容{ margin:0 auto宽度宽度：600px} #内容# nav { background : # 006400 height :32 pmargin-top :10 px；} #内容# nav ul { list-style : none；} #内容# nav ul li { float:left宽度宽度：100像素线高：32 px位置：相对；} # nav div { width:100px位置：绝对；左侧：0像素填充-底部：0 px背景技术： # 006400;float:left高度：0;飞越：隐藏；} #内容#导航李.a { text-decoration : nonecolor: # 00CD00线高：32 px显示：块；右边框：1px实心# 009800;} # nav div a { text-decoration : none；color: # 00CD00线高：26 px显示：块；} # nav div a :悬停{背景： # 005400；}/style/head dydiv id=' content ' div id=' nav ' ul id=' supnav ' lia href=' # ' class=' a '菜单项1/a div a href='# '菜单测试1/a a href='# '菜单测试1/a a href='# '菜单测试1/a /div /li lia href='#' class='a '菜单项2/a div a href='# '菜单测试2/a a href='# '菜单测试2/a a href='# '菜单测试2/a /div /li lia href='#' class='a '菜单项3/a div a href='# '菜单测试3/a a href='# '菜单测试3/a a href='# '菜单测试3/a a href='# '菜单测试3/a a href='# '菜单测试3/a /div /li lia href='#' class='a '菜单项4/a div a href='# '菜单测试4/a a href='# '菜单测试4/a a href='# '菜单测试4/a /div /li lia href='#' class='a '菜单项5/a div a href='# '菜单测试5/a a href='# '菜单测试5/a a href='# '菜单测试5/a a href='# '菜单测试5/a /div /li lia菜单项6/a div a href='# '菜单测试6/a a href='# '菜单测试6/a a href='# '菜单测试6/a/div/Li/ul/div/div脚本类型=' text/JavaScript ' var sup nav=document。 getelementbyid(' sup nav ')；var nav=文档。getelementbyid(' nav ')；var btns=文档。getelementsbytagname(' Li ')；var subnavs=nav。GetElementsBytagname(' div ')；var padding bottom=20 var DefaultHeight=0；函数drop(obj，ivalue){ var a=obj。偏移光线；var speed=(ivalue-obj。偏右)/8；a=数学. floor(速度);物体。风格。高度=一个“px”；}窗口。onload=function(){ for(var I=0；ibt ns。长度；i ){ btns[i].索引=我；btns[i].onmouseover=function(){ var osubnav=subnav s[this。索引]；var sublink=osubnav。GetElementsBytagname(' a ')；if(osubnav。第一个孩子。标记名==undefined){ var ita height=ParSeint(OS ubnav。子节点[1]).偏移量ThEight)*子行。长度填充底部；} else { var ita height=parsent(osubnav。第一个孩子。偏右)*子行。长度填充底部；} ClearInterval(这。itimer)；这个。itimer=SetInterval(function(){ drop(osubnav，itar height)；},30);} BTN[I].onmouseout=function(){ var osubnav=subnav s[this。索引]；clearInterval(这个。itimer)；这个。itimer=SetInterval(function(){ drop(osubnav，DefaultHeight)；},30);} } }/脚本/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。