JS实现样式清新的横排下拉菜单效果

本文实例讲述了射流研究…实现样式清新的横排下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款灰色调横排清新的下拉菜单，完全符合网标准，兼容性不错，菜单简洁好用，适合大部分的网页风格。如果色调不是你想要的，自己发挥聪明才智，修改一下吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-style-hp-menu-demo/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titleCSS下拉菜单，竖向/title style type=' text/CSS ' media=' screen '！-# Nav { width : auto；向左浮动：边框-左侧： 1px实心# 777;} ul { margin : 0pxpadding : 0pxlist-style :无；} ul li {相对位置：宽度： 120像素；向左浮动：} Li ul { position : absolute eleft : 0pxtop : 23 pxdisplay :无；边框-底部： 1px实心# 777;边框-左侧left: 0px}ul阿利{ display : block font-size : 12px；线高： 22px文本装饰：无；颜色： # 333背景色： # FFF；高度： 22px左填充left: 8pxborder: 1px固体# 777;边框-左侧left: 0px}ul li ul阿利{border: 1px固体# 777;边框-底部： 0px} a:hover { color: # F60背景-color : # EFEFEF；} * html ul li {左侧浮动：高度： 1%;}* html ul阿利{身高：1%；}李：悬停ul，Li . over ul { display : block }-/style script语言=' JavaScript '类型=' text/JavaScript '！-StartList=function(){ if(document。所有文件。getelementbyid){ var menuRoot=document。getelementbyid(' Menu ')；for(var I=0；我不知道。子节点。长度；I){ var node=MenuRoot。子节点[I]；if(节点。nodename=' LI '){ node。onmouseover=function(){ this。类名=' over}节点。onmouseout=function(){ this。类名=这个。类名。替换(' over '，' ')；} } } } } window . onload=startList-/script/head dydiv id=' Nav ' ul id=' Menu ' lia href=' # '首页/a/lilia href='# '关于我们/aullia href='# '网站介绍/a/lilia href='# '客户反馈/a/lilia href='# '产品服务/a/li/ul/lilia href='# '脚本下载/aullia href='# '最新脚本/a/lilia href='# '下载排行/a/lilia href='# '分类索引/a/li/ul/lilia href='# '网页特效/aullia href='# '菜单/a/lilia href='# '布局/a/li/ul/li/ul/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。