简易下拉

方法1：原生js代码

window.onload = function(){

var lis = document.getElementById("menu").getElementsByTagName("li");

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

lis[i].onmouseover = function () {

this.className+=(this.className.length>0?" ":"")+"active";

};//交集选择器的应用

lis[i].onmouseout = function () {

this.className=this.className.replace("active","");

};//将className为active的清除，就用replace方法，用一个空串来替换active

}

}

方法2：jquery代码

$(function(){

$("#menu ul li").hover(function () {

$(this).children("ul").css("display","block");

},

function () {

$(this).children("ul").css("display","none");

})

})

html代码

<div id="menu">

<ul>

<li><a href="#">div+css</a>

<ul>

<li><a href="#">二级导航列表1</a></li>

<li><a href="#">二级导航列表2</a></li>

<li><a href="#">二级导航列表3</a></li>

<li><a href="#">二级导航列表4</a></li>

</ul>

</li>

<li><a href="#">Java</a>

<ul>

<li><a href="#">二级导航列表1</a></li>

<li><a href="#">二级导航列表2</a></li>

<li><a href="#">二级导航列表3</a></li>

<li><a href="#">二级导航列表4</a></li>

</ul>

</li>

<li><a href="#">net</a>

<ul>

<li><a href="#">二级导航列表1</a></li>

<li><a href="#">二级导航列表2</a></li>

<li><a href="#">二级导航列表3</a></li>

<li><a href="#">二级导航列表4</a></li>

</ul>

</li>

<li><a href="#">php</a>

<ul>

<li><a href="#">二级导航列表1</a></li>

<li><a href="#">二级导航列表2</a></li>

<li><a href="#">二级导航列表3</a></li>

<li><a href="#">二级导航列表4</a></li>

</ul>

</li>

</ul>

</div>

css代码

*{

padding:0;

margin: 0;

}

#menu ul{

width: 600px;

}

#menu ul li{

width: 120px;

height: 35px;

line-height: 35px;

text-align: center;

float:left;

background-color: blue;

margin-right: 10px;

border-bottom: 1px solid black;

list-style:none;

}

#menu ul li a{

color:white;

text-decoration:none;

display: block;

}

#menu ul li a:hover{

background-color: red;

}

#menu ul li ul{

display:none;

}

#menu ul li.active ul{

display: block;

}//设置隐藏的ul显示的条件就是添加一个交集选择器，当ul的父级加上一个类名时，此时的条件促使ul从隐藏到显示。

#menu ul li ul li{

float: none;

}

#menu ul li ul li a:hover{

background-color: black;

}