js基础:导航栏添加二级栏目下拉菜单

1、先做一个简单的框架和样式

html代码：

<div id='main'>

<ul id='nav'>

<li>栏目一

<ul>

<li>栏目一1</li>

<li>栏目一2</li>

</ul>

</li>

<li>栏目二

<ul>

<li>栏目二1</li>

<li>栏目二2</li>

<li>栏目二3</li>

</ul>

</li>

<li>栏目三

<ul>

<li>栏目三1</li>

</ul>

</li>

</ul>

</div>

css样式代码：

<style>

ul { list-style: none; margin: 0; padding: 0;}

ul li { float:left; width: 100px; height: 30px; line-height: 30px; text-align: center; border-top: 1px solid #ccc; }

ul ul { display: none;}

#main { width: 500px; height: 600px; margin: 20px auto;}

</style>

隐藏或显示二级菜单，其实就是隐藏或显示当前li下面的ul

2、开始写js代码  先获取到一级栏目中的每个li元素

window.onload = function (){

var oUl = document.getElementById('nav');

var aLi = oUl.getElementsByTagName('li');

｝

3、然后添加鼠标移入移出事件，因为不确定鼠标移入的是哪个li，所以这里用for循环来做。

for ( var i=0; i<aLi.length; i++){

aLi[i].onmouseover = function (){

this.getElementsByTagName('ul')[0].style.display = 'block';

}

}

鼠标移入时，当前这个li元素下面的ul让其显示。

4、鼠标移出时，当前这个li元素下面的ul让其隐藏。

for ( var i=0; i<aLi.length; i++){

aLi[i].onmouseout = function (){

this.getElementsByTagName('ul')[0].style.display = 'none';

}

}