js实现横向伸展开的二级导航菜单代码

本文实例讲述了射流研究…实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下：

这是一款射流研究…实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，就能展开二级的菜单，菜单没有过多美化，只是一般的修饰，使用的朋友可根据您自己的网站风格重新美化菜单风格。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-r-show-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 ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title横向伸展开来的二级导航菜单/title style type='text/css ' .suckerdiv { } .suckerdiv ul { width: 120px相对位置：} .surgerdiv ul Li ul { left : 120 px；/*父菜单宽度- 1*/位置：绝对值；宽度： 140像素；/*子菜单宽度*/top : 0；显示器：无；}/*所有后续子菜单级别偏移*/。sulkerdiv ul Li ul Li ul {左： 159 px/*父菜单宽度- 1*/} /*菜单链接样式*/。阿利区块；颜色： # 353302文本装饰：无；font:12px宋体；背景技术# eee线高：24 pxpadding: 0px 10pxborder: 1px实心# fff边框-底部： 0;} .阿利：访问了{ color: black}。sulkerdiv ul阿利：悬停{ color :白色；背景-颜色： # 97c 839} .苏尔迪夫。子文件夹样式{ }。subfolderstyle :悬停{背景： # 97c 839 URL()-不重复右中；}/style/head dyscript type=' text/JavaScript ' var menuids=[' abkertree 1 ']函数build subscribe(){ for(var I=0；长度；I){ var ulta GS=文档。getelementbyid(menuids[I]).getElementsByTagName('ul ')为(var t=0；t ulta GS。长度；AGS。父节点。GetElementsBytagname(' a ')[0].类名='子文件夹样式' ult AGS[t]。父节点。onmouseover=function(){ this。getelementsbytagname(' ul ')[0]。风格。display=' block这个。第一个孩子。风格。背景色='绿色'；乌特AGS。父节点。onmouseout=function(){ this。getelementsbytagname(' ul ')[0]。风格。display=' none '这个。第一个孩子。风格。背景色=' '；} } } } if(窗口。addeventlistener)窗口。addeventlistener(' load '，build subscribe，false)else if(window。attachevent)窗口。attachevent(' onload '，build subscribbles)/script div class=' suckerdiv ' ul id=' suckertree 1 ' lia href=' # '腾讯新闻/a/li lia href='# '腾讯汽车/a/li lia href='# '腾讯科技/a/li lia href='# '腾讯手机/a ul lia href=' # ' HTC/a/Li lia href=' # '联想/a/li lia href='# '华为/a/li lia href='# '中兴/a/li /ul /li /ul/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。