三级下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级下拉菜单</title>
<!-- 引入线上jquery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type='text/css'>
*{padding:0;margin:0;}
a{
color:#fff;
text-decoration:none;
display:block;
}
body{
background:rgba(0,0,255,0.5);
}
li{list-style:none;}
.nav{
background:rgba(0,255,255,0.1);
width:500px;
height:40px;
line-height:40px;
margin:20px auto;
text-align:center;
padding-bottom:3px;
box-shadow:0px -2px 3px rgba(0,0,0,0.5) inset;
}
.nav_1 li{
position:relative;
float:left;
width:100px;
height:40px;
padding-bottom:3px;
}
.nav_1>li:hover{
background:rgba(0,0,255,1);
box-shadow:0px -2px 3px rgba(255,255,255,0.5) inset;
}
.nav_2>li:hover{
background:rgba(0,0,255,0.5);
box-shadow:0px -2px 3px rgba(255,255,255,0.5) inset;
}
.nav_3>li:hover{
background:rgba(0,0,255,0.1);
box-shadow:0px -2px 3px rgba(255,255,255,0.5) inset;
}
.nav_2{
background:rgba(0,255,255,0.1);;
width:100px;
position:absolute;
top:103px;
left:0px;
display:none;
}
.nav_3{
width:100px;
background:rgba(0,255,255,0.1);
position:absolute;
left:200px;
top:0px;
display:none;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$('.nav_2').parent().css('boxShadow','0px 2px 0px rgba(255,255,0,0.5) inset');
$('.nav_3').parent().css('boxShadow','2px 0px 0px rgba(255,255,0,0.5) inset');
// 一级导航hover效果
$('.nav_1>li').hover(
function(){
$(this).children('.nav_2').stop().fadeIn(300).animate({'top':'43px'},300);
},function(){
$(this).children('.nav_2').stop().animate({'top':'103px'},300).fadeOut(300);
}
);
// 二级导航hover效果
$('.nav_2>li').hover(
function(){
$(this).children('.nav_3').stop().fadeIn(300).animate({'left':'100px'},300);
},function(){
$(this).children('.nav_3').stop().animate({'left':'200px'},300).fadeOut(300);
}
);
});
</script>
</head>
<body>
<div class='nav'>
<ul class='nav_1'>
<li><a href=''>一级1</a>
<!-- 二级 -->
<ul class='nav_2'>
<li><a href=''>二级1</a>
<!-- 三级 -->
<ul class='nav_3'>
<li><a href=''>三级1</a></li>
<li><a href=''>三级2</a></li>
</ul>
</li>
<li><a href=''>二级2</a></li>
<li><a href=''>二级3</a></li>
</ul>
</li>
<li><a href=''>一级2</a>
<!-- 二级 -->
<ul class='nav_2'>
<li><a href=''>二级1</a></li>
<li><a href=''>二级2</a></li>
<li><a href=''>二级3</a></li>
</ul>
</li>
<li><a href=''>一级3</a>
<!-- 二级 -->
<ul class='nav_2'>
<li><a href=''>二级1</a>
<!-- 三级 -->
<ul class='nav_3'>
<li><a href=''>三级1</a></li>
<li><a href=''>三级2</a></li>
</ul>
</li>
<li><a href=''>二级2</a>
<!-- 三级 -->
<ul class='nav_3'>
<li><a href=''>三级1</a></li>
<li><a href=''>三级2</a></li>
</ul>
</li>
<li><a href=''>二级3</a></li>
</ul>
</li>
<li><a href=''>一级4</a></li>
<li><a href=''>一级5</a>
<!-- 二级 -->
<ul class='nav_2'>
<li><a href=''>二级1</a>
<!-- 三级 -->
<ul class='nav_3'>
<li><a href=''>三级1</a></li>
<li><a href=''>三级2</a></li>
</ul>
</li>
<li><a href=''>二级2</a>
<!-- 三级 -->
<ul class='nav_3'>
<li><a href=''>三级1</a></li>
<li><a href=''>三级2</a></li>
</ul>
</li>
<li><a href=''>二级3</a>
<!-- 三级 -->
<ul class='nav_3'>
<li><a href=''>三级1</a></li>
<li><a href=''>三级2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>