JS CSS相对定位实现的下拉菜单

本文实例讲述了JS CSS相对定位实现的下拉菜单。分享给大家供大家参考。具体如下：

这里使用的是相对定位，不过效果还可以，用时候再修整一下，这个只是实现了大概功能，还有许多细节没有修饰。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-ab-fix-menu-codes/

具体代码如下：

htmlheadtitle非定位CSS Js下拉菜单/title style # menu { position : absolute；字体系列：无衬线字体；font-size : 9 pt} #菜单li {左侧浮动：列表样式类型：无；宽度： 102像素；背景-颜色：天蓝色；border: 1px固体# 0066 cc text-缩进： 0px左边距left: 3px} #菜单阿利{ color:蓝色文本装饰：无；宽度： 100%;显示器：块；} #菜单Li a : hover { color : white } #菜单Li ul {底色：天蓝色；margin : 0pxpadding : 0px } #菜单Li ul Li { padd : 0pxmargin : 0pxfloat :无；列表样式类型：无；宽度： 100像素；文本-缩进： 0pxborder:无；} #菜单li ul阿利{ color:黑色文本装饰：无；} #菜单Li ul :悬停{颜色：黑色；背景-color : aqua；}/style脚本语言=' JavaScript ' type=' text/JavaScript ' var t=false，当前；函数SetupMenu() { if(！document.getElementsByTagName)返回；项目=文档。getelementsbytagname(' Li ')；for(I=0；iitems.lengthi ) { if (items[i]).类名！='菜单')继续；thelink=findChild(items[i]，' A ')；链接。onmouseover=显示菜单；the link . onmouseout=StartTimerif(ul=find child(items[I]，' UL '){ ul。风格。显示='无'；for(j=0；七月。子节点。长度；j ) { ul.childNodes[j].onmouseover=ReSETimeRul . child nodes[j].onmouseout=StartTimer} } } }函数findChild(obj，tag){ cn=obj。子节点；for(k=0；kcn。长；k ) { if (cn[k]).nodeName==标记)返回cn[k]；}返回false}函数ShowMenu(e) { if(！e)var e=窗口。事件；thislink=(e.target)？目标： e。重置imer()；如果(当前)隐藏菜单(当前);这个链接=这个链接。父节点；当前=thislinkul=findChild(此链接，“UL”)；if(！ul)返回；ul。风格。display=' block}函数隐藏菜单(链接){ ul=查找子菜单(链接，‘UL’)；if(！ul)返回；ul。风格。显示='无'；}函数重置imer(){ if(t)窗口。clear time out(t)；}函数StartTimer(){ t=window。settimeout(' HideMenu(当前)'，200)；} window . onload=SetupMenu/script/headdy h1菜单Test/h1ul id=' menu ' Li class=' menu ' a href=' # ' Home/a/Lili class=' menu ' a href=' # ' Products/a ul lia href=' # '子项目1/a/li lia href='# '子项目2/a/Li/ul/Lili class=' menu ' a href=' # ' Support/a ul lia href=' # '子项目1/a/li lia href='# '子项目2希望本文所述对大家的Java脚本语言程序设计有所帮助。