我们这一篇来用javascript脚本实现下拉菜单的显示和隐藏。使用javascript方法实现我们需要用的知识有：
1)js事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。
2)js基础语法：使用function关键字定义函数。
3)dom编程：getelementsbytagname()方法。
那么接下来就是我们制作的流程：
1)隐藏二级菜单：设置css样式,让二级菜单隐藏。
2)编写显示子菜单showsub()函数：使用getelementsbytagname获取二级菜单项；通过style.display设置二级菜单显示。
3)编写隐藏子菜单hidesub()函数：使用getelementsbytagname获取二级菜单项；通过style.display设置二级菜单隐藏。
4)添加鼠标事件：给有二级菜单的一级菜单添加鼠标事件,并调用showsub()/hidesub()函数，实现鼠标经过一级菜单，二级菜单显示和隐藏。
5)做浏览器兼容性检测，至少五个浏览器。ie7,8,9，火狐，谷歌，2345浏览器等。
效果图：
html代码：
下拉菜单 网站首页 课程大厅 javascript jquery ajax 学习中心 视频学习 案例学习 交流平台 经典案例 关于我们

外部css样式表style.css文件代码：
/*css全局设置*/ *{ margin:0; padding:0; } .nav{ background-color:#eeeeee; height:40px; width:450px; margin:0 auto; } ul{ list-style:none; } ul li{ float:left; line-height:40px; text-align:center; } a{ text-decoration:none; color:#000000; display:block; width:90px; height:40px; } a:hover{ background-color:#666666; color:#ffffff; } ul li ul li{ float:none; background-color:#eeeeee; } ul li ul{ display:none; } /*为了兼容ie7设置的css样式，但是又必须写在a:hover前面*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#eeeeee; } ul li ul li a:hover{ background-color:#009933; }
外部js脚本script.js文件代码：
function showsub(li){ var submenu=li.getelementsbytagname(ul)[0]; submenu.style.display=block; } function hidesub(li){ var submenu=li.getelementsbytagname(ul)[0]; submenu.style.display=none; }
以上就是本文的全部内容，希望对大家的学习有所帮助，实现下拉菜单效果。