知识点
onmouseover 鼠标经过
onmouseout 鼠标移出
function 关键字
getElementsByTagName 获取一组标签
length 获取对象成员个数
思路
给一级菜单添加鼠标事件，经鼠标在一级菜单上时，显示下面的二级菜单。但是在处理二级菜单之前，先通过 length 判断一下有没有二级菜单。
为什么要判断？
因为比如像 ul.getElementsByTagName('li') 这样的方式获取到的是所有 ul 下面的所有 li， 这个 li 可能有很多层。
完整代码
<!--
Author: XiaoWen
Create a file: 2017-02-27 11:24:01
Last modified: 2017-02-27 16:22:00
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
background: #eee;
600px;
height: 40px;
margin: 0 auto;
}
ul{
list-style:none;
}
ul li{
float: left;
line-height: 40px;
text-align: center;
position: relative;
}
a{
text-decoration: none;
color: #000;
display: block;
padding: 0 10px;
height: 40px;
}
a:hover{
color: #fff;
background: #666;
}
ul li ul li{
float: none;
background: #eee;
margin-top: 2px;
}
ul li ul{
position: absolute;
left: 0;
top: 40px;
}
ul li ul li a{
80px;
}
ul li ul li a:hover{
background: #06f;
}
ul li ul{
display: none;
}
ul li:hover ul{
/* display: block; */
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a></li>
<li><a href="#">一级菜单2</a></li>
<li>
<a href="#">一级菜单3</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a></li>
<li><a href="#">一级菜单6</a></li>
</ul>
</div>
<script>
window.onload=function(){
var a_li=document.getElementsByTagName('li');
for(var i=0;i<a_li.length;i++){
//获取 li 下面的 二级菜单 ul ，
//如果能获取到的个数是 1 个以上，
//条件成立，把 li 下面 的 二级菜单 ul 显示。
if(a_li[i].getElementsByTagName('ul').length){
a_li[i].onmouseover=function(){
this.getElementsByTagName('ul')[0].style.display="block"
}
a_li[i].onmouseout=function(){
this.getElementsByTagName('ul')[0].style.display="none"
}
}
}
}
</script>
</body>
</html>
总结
css 中的鼠标伪类已经注释了的 ul li:hover ul{/* display: block; */} ，现在是用 js 实现，所以用不着这个鼠标伪类了。
通过这种方法写的 js 下拉菜单，可以避免 ie6 下的不支持非 a 标签伪类的情况。