abstrait：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三級(jí)下拉菜單</title><!-- 引入線上jquery文件 --><script src="https://code.jqu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級(jí)下拉菜單</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');
// 一級(jí)導(dǎo)航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);
}
);
// 二級(jí)導(dǎo)航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=''>一級(jí)1</a>
<!-- 二級(jí) -->
<ul class='nav_2'>
<li><a href=''>二級(jí)1</a>
<!-- 三級(jí) -->
<ul class='nav_3'>
<li><a href=''>三級(jí)1</a></li>
<li><a href=''>三級(jí)2</a></li>
</ul>
</li>
<li><a href=''>二級(jí)2</a></li>
<li><a href=''>二級(jí)3</a></li>
</ul>
</li>
<li><a href=''>一級(jí)2</a>
<!-- 二級(jí) -->
<ul class='nav_2'>
<li><a href=''>二級(jí)1</a></li>
<li><a href=''>二級(jí)2</a></li>
<li><a href=''>二級(jí)3</a></li>
</ul>
</li>
<li><a href=''>一級(jí)3</a>
<!-- 二級(jí) -->
<ul class='nav_2'>
<li><a href=''>二級(jí)1</a>
<!-- 三級(jí) -->
<ul class='nav_3'>
<li><a href=''>三級(jí)1</a></li>
<li><a href=''>三級(jí)2</a></li>
</ul>
</li>
<li><a href=''>二級(jí)2</a>
<!-- 三級(jí) -->
<ul class='nav_3'>
<li><a href=''>三級(jí)1</a></li>
<li><a href=''>三級(jí)2</a></li>
</ul>
</li>
<li><a href=''>二級(jí)3</a></li>
</ul>
</li>
<li><a href=''>一級(jí)4</a></li>
<li><a href=''>一級(jí)5</a>
<!-- 二級(jí) -->
<ul class='nav_2'>
<li><a href=''>二級(jí)1</a>
<!-- 三級(jí) -->
<ul class='nav_3'>
<li><a href=''>三級(jí)1</a></li>
<li><a href=''>三級(jí)2</a></li>
</ul>
</li>
<li><a href=''>二級(jí)2</a>
<!-- 三級(jí) -->
<ul class='nav_3'>
<li><a href=''>三級(jí)1</a></li>
<li><a href=''>三級(jí)2</a></li>
</ul>
</li>
<li><a href=''>二級(jí)3</a>
<!-- 三級(jí) -->
<ul class='nav_3'>
<li><a href=''>三級(jí)1</a></li>
<li><a href=''>三級(jí)2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Professeur correcteur：韋小寶Temps de correction：2019-02-16 13:10:47
Résumé du professeur：寫(xiě)的很棒 這個(gè)效果寫(xiě)的非常的有意思 看起來(lái)就特別的高級(jí) 后期可以使用到布局中去哦