abstract：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> 三級下拉菜單</title> <script type="text/javascript" src="jquery-3.3.1.min.js"&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 三級下拉菜單</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
.menu{width:800px;height:35px;margin:0px auto;background:#000;margin-top:20px;color:#fff;border:1px solid#ccc;border-radius:5px;}
ul{list-style:none;}
ul li{width:100px;height:35px;line-height: 35px;text-align:center;float:left;border-right:1px solid #ccc;cursor:pointer;}
.twobox li{width: 100px;height:30px;line-height: 30px;background:#2d2d2d;cor:#a9a9a9;font-size:14px;position:relative;border:0px;}
.twobox li:hover{background:#000;color:#fff;}
.three{position: absolute;top: 0px;left: 100px;}
.three li{width: 99px;height: 30px;line-height: 30px;border: 0;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.twobox').hide()
// 二級菜單隱藏
$('.three').hide()
// 三級菜單隱藏
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(500)
})
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(500)
})
$('.two').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</head>
<body>
<div class="menu">
<ul class='one'> <!-- 一級下拉下菜單 -->
<li>首頁</li>
<li>酒
<ul class="twobox"> <!-- 二級下拉下菜單 -->
<li class="two">啤酒
<ul class="three"> <!-- 三級下拉下菜單 -->
<li>白啤</li>
<li>黑啤</li>
<li>黃啤</li>
</ul>
</li>
<li class="two">葡萄酒
<ul class="three">
<li>干紅</li>
<li>干白</li>
<li>桃紅</li>
</ul>
</li>
<li>洋酒</li>
<li>白酒</li>
</ul>
</li>
<li>飲料
<ul class="twobox">
<li class="two">碳酸飲料
<ul class="three">
<li>品牌</li>
<li>產(chǎn)品</li>
<li>規(guī)格</li>
<li>凈含量</li>
</ul>
</li>
<li class="two">茶飲料
<ul class="three">
<li>品牌</li>
<li>產(chǎn)品</li>
<li>規(guī)格</li>
<li>凈含量</li>
</ul>
</li>
<li class="two">果汁飲料
<ul class="three">
<li>品牌</li>
<li>產(chǎn)品</li>
<li>規(guī)格</li>
<li>凈含量</li>
</ul>
</li>
<li class="two">飲用水
<ul class="three">
<li>品牌</li>
<li>產(chǎn)品</li>
<li>規(guī)格</li>
<li>凈含量</li>
</ul>
</li>
</ul>
</li>
<li>公司新聞</li>
<li>招聘信息</li>
<li>聯(lián)系我們</li>
</ul>
</div>
</body>
</html>
Correcting teacher：韋小寶Correction time：2018-12-11 13:06:47
Teacher's summary：寫的挺不錯(cuò)的！但是代碼看起來比較亂！下次記得給代碼加上高亮哦！