-第2章 JS方法实现下拉菜单显示和隐藏

知识点

onmouseover 鼠标经过
onmouseout 鼠标移出
function 关键字
getElementsByTagName 获取一组标签
length 获取对象成员个数

思路
给一级菜单添加鼠标事件，经鼠标在一级菜单上时，显示下面的二级菜单。但是在处理二级菜单之前，先通过 length 判断一下有没有二级菜单。

为什么要判断？
因为比如像 ul.getElementsByTagName('li') 这样的方式获取到的是所有 ul 下面的所有 li， 这个 li 可能有很多层。

完整代码

• 一级菜单1


• 一级菜单2


• 
  一级菜单3
  
  
  
  • 二级菜单1
  
  
  • 二级菜单2
  
  
  • 二级菜单3
  
  
  
  


• 一级菜单4


• 一级菜单5


• 一级菜单6

总结

css 中的鼠标伪类已经注释了的 ul li:hover ul{/* display: block; */} ，现在是用 js 实现，所以用不着这个鼠标伪类了。

通过这种方法写的 js 下拉菜单，可以避免 ie6 下的不支持非 a 标签伪类的情况。