版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lyxuefeng/article/details/82391062
思路：
通过:hover伪类或onmouseenter事件在鼠标经过时改变二级菜单的display
关键知识：:hover伪类/onmouseenter
1.纯静态版
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.clearfix:after{/*清除浮动*/
content: '';
clear: both;
display: block;
}
.box {
width: 240px;
margin: 100px auto;
}
.main {
background: url(images/bg.jpg);
height: 21px;
}
.main li{
float: left;
margin-left: 4px;
background: url(images/libg.jpg) no-repeat;
position: relative;
}
.main li:hover ul{
display: block;/*关键*/
}
.main li ul{
display: none;
position: absolute;/*定位使其脱离标准文档流*/
}
.main li ul li{
float: none;
margin: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="main clearfix">
<li>一级菜单1
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>一级菜单2
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>一级菜单3
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>具体效果可见：下拉菜单（静态）
2.JavaScript版
onmouseenter和onmouseover区别：
不论鼠标指针穿过被选元素或其子元素，都会触发onmouseover 事件。
例：li有mouseover事件，它有子元素a，经过a时也会触发onmouseover
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
注意：onmouseenter和onmouseleave配对
可见实例：onmouseenter事件
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.clearfix:after{
content: '';
clear: both;
display: block;
}
.box {
width: 240px;
margin: 100px auto;
}
.main {
background: url(images/bg.jpg);
height: 21px;
}
.main li{
float: left;
margin-left: 4px;
background: url(images/libg.jpg) no-repeat;
position: relative;
}
.main li ul {
display: none;
}
.main li ul{
position: absolute;/*定位使其脱离标准文档流*/
}
.main li ul li{
float: none;
margin: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="main clearfix">
<li>一级菜单1
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>一级菜单2
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>一级菜单3
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
var main = document.getElementsByClassName("main")[0];
var lis = main.children;
for(var i=0;i<lis.length;i++){
lis[i].onmouseenter = function(){
this.children[0].style.display = "block";
}
lis[i].onmouseleave = function(){
this.children[0].style.display = "none";
}
}
</script>
</html>具体效果可见：下拉菜单（js）
3.jquery版
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.clearfix:after{
content: '';
clear: both;
display: block;
}
.box {
width: 240px;
margin: 100px auto;
}
.main {
background: url(images/bg.jpg);
height: 21px;
}
.main li{
float: left;
margin-left: 4px;
background: url(images/libg.jpg) no-repeat;
position: relative;
}
.main li ul{
position: absolute;/*定位使其脱离标准文档流*/
display: none;
}
.main li ul li{
float: none;
margin: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="main clearfix">
<li>一级菜单1
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>一级菜单2
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>一级菜单3
<ul>
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script>
// 法1
// $(".main li").mouseenter(function(){
// console.log($(this));
// console.log($(this).children("ul"));
// $(this).children("ul").show();
// });
// $(".main li").mouseleave(function(){
// $(this).children("ul").hide();
// })
//法2
// $(".main li").hover(function(){
// $(this).children("ul").show();
// },function(){
// $(this).children("ul").hide();
// })
// 法3
// $(".main li").hover(function(){
// var that = $(this).children("ul");
// var isShow = that.css('display');
// if(isShow == "block"){
// that.hide();
// }else{
// that.show();
// }
// })
//法4
$(".main li").hover(function(){
$(this).children("ul").slideToggle();
})
</script>
</html>具体效果可见：下拉菜单（jquery）
9.5改进jquery代码：
$(".main li").hover(function(){
$(this).children("ul").stop().slideToggle();
})针对jquery中动画保留（即执行多次动画效果）的bug
有关stop函数可参考：jQuery之stop