abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>navigation導(dǎo)航</title> <script type="text/javascript" src="
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navigation導(dǎo)航</title>
<script type="text/javascript" src="static/jQuery/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{padding:0px;margin:0px;}
.main_nav{margin:200px auto;width:1290px;height:50px;}
.heading{width:150px;height:50px;float:left;line-height:50px;text-align:center;border:1px solid #9D60FC;}
.sp{height:50px;display:inline-block;}
.clear{clear:both;}
ul{list-style:none;}
ul li{width:100px;height:50px;line-height:50px;text-align:center;float:left;border-right:1px solid #ccc;cursor:pointer;}
.heading_two li{width:150px;height:45px;line-height:45px;background:#ADB9BC;color:#282923;font-size:14px;position:relative;border:0px;}
.heading_two li:hover{background:#4C4C4C;color:#fff;}
.three{position:absolute;top:0px;left:150px;}
.three li{width:150px;height:45px;line-height:45px;border:0px;}
</style>
</head>
<body>
<div>
<div>
<div><i class="fa fa-home"></i> 首頁</div>
<div><i class="fa fa-newspaper-o"></i> 新聞?lì)^條1
<ul><!-- 二級(jí)下拉菜單 -->
<li>新聞?lì)^條1</li>
<li>新聞?lì)^條2
<ul><!-- 三級(jí)下拉菜單 -->
<li>新聞?lì)^條2.1</li>
<li>新聞?lì)^條2.2</li>
<li>新聞?lì)^條2.3</li>
<li>新聞?lì)^條2.4</li>
</ul>
</li>
<li>新聞?lì)^條3
<ul><!-- 三級(jí)下拉菜單 -->
<li>新聞?lì)^條3.1</li>
<li>新聞?lì)^條3.2</li>
<li>新聞?lì)^條3.3</li>
<li>新聞?lì)^條3.4</li>
</ul>
</li>
<li>新聞?lì)^條4</li>
</ul>
</div>
<div><i class="fa fa-television"></i> 熱播好劇</div>
<div><i class="fa fa-video-camera"></i> 最新電影</div>
<div><i class="fa fa-heartbeat"></i> 娛樂八卦</div>
<div><i class="fa fa-folder-open-o"></i> 熱門小說</div>
<div><i class="fa fa-plus-square"></i> 健康醫(yī)療</div>
<div><i class="fa fa-soccer-ball-o"></i> 熱門游戲</div>
</div>
<div></div>
</div>
<script type="text/javascript">
// $(document).ready(function(){})
$(function(){
//1:隱藏二級(jí)與三級(jí)下拉菜單
$('.heading_two').hide();
$('.three').hide();
//2.當(dāng)鼠標(biāo)移到包含二級(jí)菜單的一級(jí)菜單時(shí)顯示二級(jí)菜單
$('.main_nav>.heading').mouseover(function(){
$(this).find('.heading_two').slideDown(500);
})
//3.當(dāng)鼠標(biāo)移到包含三級(jí)菜單的二級(jí)菜單時(shí)顯示三級(jí)菜單
$('.main_nav>.heading').mouseleave(function(){
$(this).find('.heading_two').slideUp(500);
})
//4.當(dāng)鼠標(biāo)移出包含三級(jí)菜單的二級(jí)菜單時(shí)隱藏三級(jí)菜單
$('.two').mouseover(function(){
$(this).find('.three').slideDown(500);
})
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(500);
})
})
</script>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-08-01 13:37:43
Teacher's summary：這種級(jí)聯(lián)菜單 , 實(shí)現(xiàn)手段有很多, 我嘗試幾種