JavaScript实现下拉菜单的显示和隐藏

我们这一篇来用Java脚本语言脚本实现下拉菜单的显示和隐藏。使用Java脚本语言方法实现我们需要用的知识有：1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件2)JS基础语法：使用功能关键字定义函数3)DOM编程：getElementsByTagName()方法。那么接下来就是我们制作的流程：1)隐藏二级菜单：设置半铸钢钢性铸铁(铸造半钢)样式，让二级菜单隐藏。2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过样式。显示设置二级菜单显示。3)编写隐藏子菜单hidesub()函数：使用getElementsByTagName获取二级菜单项；通过样式。显示设置二级菜单隐藏。4)添加鼠标事件：给有二级菜单的一级菜单添加鼠标事件，并调用showsub()/hidesub()函数，实现鼠标经过一级菜单，二级菜单显示和隐藏。5)做浏览器兼容性检测，至少五个浏览器IE7，8，9，火狐，谷歌，2345浏览器等。

效果图：

超文本标记语言代码：

span style=' font-size :18 px'！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题下拉菜单/title！-引入的外部半铸钢钢性铸铁(铸造半钢)样式文件- link rel='样式表type=' text/CSS ' href=' style。CSS '/！-引入的外部射流研究…脚本文件-脚本类型=' text/JAVAScript ' src=' http :脚本。js /脚本/头体div id=' nav ' class=' nav ' ul lia href=' # '网站首页/a/Li Li on mouse over=' show sub(this)' on mouse out=' hide sub(this)' a href=' # '课程大厅/a ul lia href=' # ' JavaScript/a/Li lia href=' # ' jQuery/a/Li lia href=' # ' Ajax/a/Li/ul/Li on mouse over=' showsub(this)' on mouse out=' hide sub(this)' a href=' # '学习中心/a ul lia href='# '视频学习/a/li lia href='# '案例学习/a/li lia href='# '交流平台/a/li /ul /li lia href='# '经典案例/a/li lia href='# '关于我们/a/li /ul /div /body /html /span外部半铸钢钢性铸铁(铸造半钢)样式表style.css文件代码：

span style=' font-size :18 px'/*CSS全局设置*/* { margin :0；划水：0;} .nav {底色： # EEEEEEE高度：40 px宽度width :450 pxmargin :0 auto } ul { list-style : none；} ul li { float:left线高：40 px文本对齐：居中；} a { text-decoration : nonecolor: # 000000显示：块；宽度：90 px高度：40 px} a :悬停{背景色： # 66666；color : # FFFFFF } ul Li ul Li { float : none背景色-: # EEEEEEE；} ul li ul { display:none} /*为了兼容IE7设置的半铸钢钢性铸铁(铸造半钢)样式，但是又必须写在a:hover前面*/ul li ul li a:link，ul Li ul :访问过{底色： # EEEEEEE} ul Li ul阿利：悬停{背景色： # 009933；} /span外部射流研究…脚本script.js文件代码：

span style=' font-size :18 px'函数showsub(li){ var子菜单=李。getelementsbytagname(' ul ')[0]；子菜单。子菜单. style.display=' block}函数hidesub(li){ var子菜单=李。getelementsbytagname(' ul ')[0]；子菜单。子菜单. style.display=' none}/span以上就是本文的全部内容，希望对大家的学习有所帮助，实现下拉菜单效果。