<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>動(dòng)畫菜單</title>
<style?type="text/css">
*?{?margin:?0;?padding:?0;?font-size:?14px;?}
a?{?color:?#333;?text-decoration:?none?}
ul{?list-style:?none;?}
.nav?{height:?30px;?border-bottom:?5px?solid?#F60;?margin-left:50px;?width:600px;}
.nav?li?{?float:?left;?position:relative;?height:30px;?width:120px?}
.nav?li?a?{?display:?block;?height:?30px;?text-align:?center;?line-height:?30px;?width:120px;?background:?#efefef;?margin-left:?1px;?}
.nav?li?a:hover{?background:?#F60;}
.subNav{?position:absolute;?top:30px;?left:0;?width:120px;?height:0;?overflow:hidden}
.subNav?li?a{?background:#ddd?}
.subNav?li?a:hover{?background:#efefef}
</style>
<script>
window.onload=function(){
????var?aLi=document.getElementsByTagName('li');
for(var?i=0;?i<aLi.length;?i++){
aLi[i].onmouseover=function(){
????????????//鼠標(biāo)經(jīng)過(guò)一級(jí)菜單，二級(jí)菜單動(dòng)畫下拉顯示出來(lái)
????????????//var?ul?=?this.firstChild?;?為什么這樣獲取不到UL節(jié)點(diǎn)
????????????var?ul?=?this.getElementsByTagName("ul")[0];
????????????ul.className?=?"";
}
????????//鼠標(biāo)離開菜單，二級(jí)菜單動(dòng)畫收縮起來(lái)。
aLi[i].onmouseout=function(){
???var?ul?=?this.getElementsByTagName("ul")[0];
???ul.className?=?"subNav";
}
}
}
</script>
</head>
<body>
<ul?class="nav">
????<li><a?href="#">一級(jí)菜單</a>
????<ul?class="subNav">
????????<li><a?href="#">二級(jí)菜單</a></li>
????????????<li><a?href="#">二級(jí)菜單</a></li>
????????????<li><a?href="#">二級(jí)菜單</a></li>
????????????<li><a?href="#">二級(jí)菜單</a></li>
????????</ul>
????</li>
????<li><a?href="#">一級(jí)菜單</a>
????<ul?class="subNav">
????????<li><a?href="#">二級(jí)菜單</a></li>
????????????<li><a?href="#">二級(jí)菜單</a></li>
????????????<li><a?href="#">二級(jí)菜單</a></li>
????????????<li><a?href="#">二級(jí)菜單</a></li>
????????</ul>
????</li>
????<li><a?href="#">一級(jí)菜單</a></li>
????<li><a?href="#">一級(jí)菜單</a></li>
????<li><a?href="#">一級(jí)菜單</a></li>
</ul>
</body>
</html>
2017-08-01
是可以取到的，取到的是a標(biāo)簽, ?通過(guò)var?ul?=?this.firstChild?; alert(ul.nodeName),看到取出的元素，如果彈出的#text, ?那么應(yīng)該是li標(biāo)簽后的a標(biāo)簽換行了。?this.firstChild把空格當(dāng)成了第一個(gè)子元素。