JavaScript实现非常简单实用的下拉菜单效果

本文通过一个例子说明了JavaScript是一个非常简单实用的下拉菜单。分享给大家参考。具体如下：

这是一个实用的JS下拉菜单。当您将鼠标移到菜单上时，它会显示一个辅助菜单，该菜单是从其他网站中整理出来的。修改需要很多时间。现在去掉了一些没用的代码，更简洁了，代码兼容性似乎表现不错。这个两级下拉菜单基本上是用CSS和JavaScript实现的，真的很简单实用。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-down-show-menu-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 runat=' server ' title JavaScript下拉菜单/title style type=' text/CSS ' * { padd :0；margin :0 } body { font-family : verdana，sans-serif；font-size :14 px背景色： # 000;} #导航，#导航Li ul { list-style-type : none；} #导航{ } #导航li { float:left文本对齐：居中；位置：相对；} #导航li a:link，#导航阿利：访问了{显示：块；文本装饰：无；color: # fff宽度：82 px高度：40 px线高：40 pxborder:1px实心# fff边框宽度宽度：1px 1px 0 0背景# 255f9e填充-左侧：10 px} #导航li a:hover { color: # fff背景# ffb100} #导航Li ul :悬停{ color : # fff背景# ffb100 } #导航li ul { display:none位置：绝对；top :40 pxmargin-top :1 px；font-size :12 px}/style script type=' text/JavaScript '函数显示subscribe(Li){ var subscribe=Li。getelementsbytagname(' ul ')[0]；子菜单。subscript . style . display=' block }函数hide Subscription(Li){ var Subscription=Li。GetElementsBytagname(' ul ')[0]；子菜单。subscribe . style . display=' none }/script/head body ul id=' navigation ' Li on mouse over=' display subscribe(this)' on mouse out=' hide subscribe(this)' a href=' # '菜单1/a ul lia href='# '菜单1/a/li lia href='# '菜单1/a/li lia href='# '菜单1/a/li lia href='# '菜单鼠标悬停时为1/a/Li/ul/Li='显示子菜单(此)“onmouseout=”隐藏子菜单(这个)' a href='# '菜单2/a ul lia href='# '栏目2/a/li lia href='# '栏目2/a/li lia href='# '栏目2/a/li lia href='# '栏目2/a/li lia '栏目2/a/Li/ul/Lili on mouseover='显示子文件夹(this)' ' on mouseout='隐藏子文件夹(this)' ' a href=' # '菜单3/a ul lia href='# '菜单3/a/li lia href='# '菜单3/a/li lia href='# '菜单3/a/li lia href='# '菜单3/a/li lia href='# '菜单3/a/Li/ul/Lili on mouseover='显示子文件夹(this)' on mouseout='隐藏子文件夹(this)' a href=' # '菜单4/a ul lia href='# '菜单4/a/li lia href='# '菜单4/a/li lia href='# '菜单4/a/li lia href='# '菜单4/a/li lia '菜单4/a/Li/ul/Lili on mouseover='显示子文件夹(this)' ' on mouseout='隐藏子文件夹(this)' ' a href=' # '栏目5/a ul lia href='# '菜单5/a/li lia href='# '菜单5/a/li lia href='# '菜单5/a/li lia href='# '菜单5/a/li lia href='# '菜单5/a/Li/ul/Lili on mouseover='显示子文件夹(this)' ' on mouseout='隐藏子文件夹(this)' ' a href=' # '栏目6/a ul lia href='# '菜单6/a/li lia href='# '菜单6/a/li lia href='# '菜单6/a/li lia href='# '菜单6/a/li lia '菜单6/a/Li/ul/Lili on mouseover='显示子文件夹(this)' ' on mouseout='隐藏子文件夹(this)' ' a href=' # '栏目7/a ul lia href='# '菜单7/a/li lia href='# '菜单7/a/li lia href='# '菜单7/a/li lia href='# '菜单7/a/li lia href='# '菜单7/a/Li/ul/Lili on mouseover='显示子文件夹(this)' ' on mouseout='隐藏子文件夹(this)' ' a href=' # '栏目8/a ul lia href='# '菜单8/a/li lia href='# '菜单8/a/li lia href='# '菜单8/a/li lia href='# '菜单8/a/li lia '菜单8/a/Li/ul/Lili on mouseover='显示子文件夹(this)' ' on mouseout='隐藏子文件夹(this)' ' a href=' # '栏目09/a ul lia href='# '菜单9/a/li lia href='# '菜单9/a/li lia href='# '菜单9/a/li lia href='# '菜单9/a/li lia href='# '菜单9/a/Li/ul/Lili on mouseover='显示子筛选器(this)' on mouseout='隐藏子筛选器(this)' a href='# '栏目10/a ul lia href='# '菜单10/a/li lia href='# '菜单10/a/li lia href='# '菜单10/a/li lia href='# '菜单10/a/li lia '菜单10/a/Li/ul/Lili on mouseover='显示提交(this)' ' on mouseout='隐藏提交(this)' ' a href=' # '栏目11/a ul lia href='# '菜单11/a/li lia href='# '菜单11/a/li lia href='# '菜单11/a/li lia href='# '菜单11/a/li lia href='# '菜单11 a/Li/ul/Li/Li/ul/Li/ul/ul/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。