abstract：<!doctype html><html><head><meta charset="UTF-8"><title>jquery三級菜單</title><!-- 標題左logo --><link rel="icon" type="image/x-icon"
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三級菜單</title>
<!-- 標題左logo -->
<link rel="icon" type="image/x-icon" href="">
<link rel="stylesheet" href=""> <!-- 外部css -->
<!-- 引入jquery -->
<script src="jquery/jquery-3.3.1.min.js"></script>
<style>
*{margin: 0px;padding: 0px;}
.menu{width: 1300px;height: 40px;background:#ccc;margin: 0px auto;text-align: center;border-radius: 6px;}
a{display: line-block; text-decoration: none; color: black;padding: 20px;text-align: center;line-height: 40px;position: relative;}
a:hover{background: #fff;}
ul{list-style: none;position: absolute; left: 0px;bottom: -1; width: 115px;}
.one:hover ul{background: #ccc;}
.have-three{position: relative;}
.three{position: absolute;}
</style>
<script>
$(document).ready(function(){
//隱藏二級和三級菜單
$(".two").hide();
$(".three").hide();
//當鼠標指向有二級菜單的一級菜單時，顯示二級菜單
$(".one").mouseover(function(){
$(this).find(".two").slideDown(200);
})
//當鼠標離開具有二級菜單的一級菜單時，不顯示二級菜單
$(".one").mouseleave(function(){
$(this).find(".two").slideUp(200);
})
//當鼠標指向有三級菜單的二級菜單時，顯示三級菜單
$(".have-three").mouseover(function(){
$(this).find(".three").slideDown(200);
$(this).find(".three").css({"left":"120px","top":"00px"});
})
//當鼠標離開有三級菜單的二級菜單時，不顯示三級菜單
$(".have-three").mouseleave(function(){
$(this).find(".three").slideUp(200);
})
})
</script>
</head>
<body>
<div>
<a href="">網(wǎng)站首頁</a>
<a href="">新 聞
<ul>
<li>圖片新聞</li>
<li>視頻新聞</li>
<li>文字新聞</li>
</ul>
</a>
<a href="">通 知</a>
<a href="">資源下載
<ul>
<li>程序源碼</li>
<li>技術文章</li>
<li>軟件工具
<ul>
<li>javascript</li>
<li>sublime</li>
<li>html語言</li>
</ul>
</li>
</ul>
</a>
<a href="">在線學習
<ul>
<li>C++語言</li>
<li>PHP腳本語言</li>
<li>面向對象
<ul>
<li>語言AA</li>
<li>語言BB</li>
<li>語言CC</li>
</ul>
</li>
</ul>
</a>
<a href="">聯(lián)系我們</a>
</div>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-03-26 09:04:46
Teacher's summary：完成的不錯。三級菜單在pc頁面很常用。繼續(xù)加油