abstract：<!DOCTYPE html><html><head> <title>jQuery三級(jí)下拉菜單</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text
<!DOCTYPE html>
<html>
<head>
<title>jQuery三級(jí)下拉菜單</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul, li{list-style: none;}
.box{width:1000px;height:500px;background: url(images/568.jpg) no-repeat;margin: 0 auto;}
.menu{
width: 1000px;
height: 50px;
margin: 0 auto;
display: none;
box-shadow: 0 2px 2px rgba(10,16,20,.24),0 0 2px rgba(10,16,20,.12);
background: pink;
opacity: 0.8;
/*position: fixed;*/
}
ul li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
float: left;
font-size: 16px;
color: black;
}
ul li:hover{
background: deeppink;
color: #fff;
}
.item1 li{width:100px;height:50px;background: pink;box-shadow: 0 2px 2px rgba(10,16,20,.24);position: relative;}
.item2{position: absolute;top: 0px;left: 100px;}
.item3{position: absolute;top: 0px;left: 100px;}
.item4 li{position: absolute;width: 1000px;height: 300px;background: pink;}
.left,.right{width: 220px;height: 500px;background: pink;box-shadow: 0 2px 2px rgba(10,16,20,.24);}
.left{float: left;margin-top: -500px;margin-left: -220px;}
.right{float: right;margin-top: -500px;margin-right: -220px;}
</style>
</head>
<body>
<div class="box">
<div class="menu">
<ul class="first">
<li>首頁(yè)
<ul class="item4"> <!-- 二級(jí)菜單 -->
<li>內(nèi)容</li>
</ul>
</li>
<li>動(dòng)畫
<ul class="item1"> <!-- 二級(jí)菜單 -->
<li>動(dòng)畫2</li>
<li class="two">3級(jí)菜單→
<ul class="item2"><!-- 三級(jí)菜單 -->
<li>我是3級(jí)菜單</li>
<li>我是3級(jí)菜單</li>
<li>我是3級(jí)菜單</li>
</ul>
</li>
<li>動(dòng)畫2</li>
<li class="two">3級(jí)菜單→
<ul class="item2"><!-- 三級(jí)菜單 -->
<li>我是3級(jí)菜單</li>
<li>我是3級(jí)菜單</li>
<li class="four">4級(jí)菜單→
<ul class="item3"><!-- 四級(jí)菜單 -->
<li>我是4級(jí)菜單</li>
<li>我是4級(jí)菜單</li>
<li>我是4級(jí)菜單</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="cont">←番→</li>
<li>音樂(lè)</li>
<li>舞蹈</li>
<li>國(guó)創(chuàng)</li>
<li>鬼畜</li>
<li>生活</li>
<li>搞笑</li>
<li>其他</li>
</ul>
</div>
</div>
<div class="left">內(nèi)容</div>
<div class="right">內(nèi)容</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('.menu').slideDown(500);
// 隱藏二級(jí)與三級(jí)菜單
$('.item1').hide();
$('.item2').hide();
$('.item3').hide();
$('.item4').hide();
// 當(dāng)鼠標(biāo) 移入 包含二級(jí)菜單的一級(jí)菜單時(shí) 顯示 當(dāng)前二級(jí)菜單
$('.first>li').mouseover(function(){
$(this).find('.item1').slideDown(100);
});
// 當(dāng)鼠標(biāo) 移出 包含二級(jí)菜單的一級(jí)菜單時(shí) 隱藏 當(dāng)前二級(jí)菜單
$('.first>li').mouseleave(function(){
$(this).find('.item1').slideUp(100);
});
// 當(dāng)鼠標(biāo) 移入 包含三級(jí)菜單的二級(jí)菜單時(shí) 顯示 當(dāng)前三級(jí)菜單
$('.two').mouseover(function(){
console.log(this)
$(this).find('.item2').slideDown(100);
});
// 當(dāng)鼠標(biāo) 移出 包含三級(jí)菜單的二級(jí)菜單時(shí) 隱藏 當(dāng)前三級(jí)菜單
$('.two').mouseleave(function(){
$(this).find('.item2').slideUp(100);
});
// 當(dāng)鼠標(biāo) 移入 包含四級(jí)菜單的三級(jí)菜單時(shí) 顯示 當(dāng)前四級(jí)菜單
$('.four').mouseover(function(){
$(this).find('.item3').slideDown(100);
});
// 當(dāng)鼠標(biāo) 移出 包含四級(jí)菜單的三級(jí)菜單時(shí) 隱藏 當(dāng)前四級(jí)菜單
$('.four').mouseleave(function(){
$(this).find('.item3').slideUp(100);
});
$('.first>li').hover(function(){
$(this).find('.item4').fadeIn(800);
},function(){
$(this).find('.item4').fadeOut(500);
});
$('.first>.cont').mouseover(function(){
$('.left').animate({marginLeft: '0px'});
$('.right').animate({marginRight: '0px'});
});
$('.first>.cont').mouseleave(function(){
$('.left').animate({marginLeft: '-220px'});
$('.right').animate({marginRight: '-220px'});
});
});
</script>
Correcting teacher：韋小寶Correction time：2019-02-13 09:56:56
Teacher's summary：不錯(cuò)不錯(cuò) 寫的很漂亮 這是要仿嗶哩嗶哩啊 繼續(xù)加油吧！