摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<title>Document</title>
<style>
*{padding:0px;margin:0px;}
.header{width:100%;height:30px;background-color:#000;}
.nav-container{ width:500px;height:30px;line-height:30px;color:lightgray;margin:0 auto;background-color:lightcoral }
.nav-container > li{float:left;width:80px;text-align: center;margin:0 15px;position:relative;}
li{list-style-type: none;cursor:pointer;}
.nav-2-container{display: none;position:absolute;border:1px solid lightskyblue;width:80px;}
.nav-3-container{ position:absolute;left:80px;top:0px;width:80px; display:none;border:1px solid lightskyblue}
</style>
<script>
$(document).ready(function(){
$('.nav-1').mouseover(function(){
$(this).find('.nav-2-container').show();
$(this).find('.nav-2-container').find('.nav-2').mouseover(function(){
$(this).css('background-color','#000');
})
$(this).find('.nav-2-container').find('.nav-2').mouseout(function(){
$(this).css('background-color','');
})
})
$('.nav-1').mouseout(function(){
$(this).find('.nav-2-container').hide();
})
$('.nav-2').mouseover(function(){
$(this).find('.nav-3-container').show();
$(this).find('.nav-3-container').find('.nav-3').mouseover(function(){
$(this).css('background-color','#000')
})
$(this).find('.nav-3-container').find('.nav-3').mouseout(function(){
$(this).css('background-color','')
})
})
$('.nav-2').mouseout(function(){
$(this).find('.nav-3-container').hide();
})
})
</script>
</head>
<body>
<div class="header">
<ul class="nav-container"> <!--一级导航内容-->
<li class="nav-1">首页</li>
<li class="nav-1">会员中心
<ul class="nav-2-container"> <!--二级导航-->
<li class="nav-2">资料管理
<ul class="nav-3-container"> <!--三级导航-->
<li class="nav-3">安全中心</li>
<li class="nav-3">登陆管理</li>
</ul>
</li>
<li class="nav-2">地址管理</li>
<li class="nav-2">财务中心</li>
</ul>
</li>
<li class="nav-1">订单管理
<ul class="nav-2-container"> <!--二级导航-->
<li class="nav-2">已付款订单</li>
<li class="nav-2">未付款订单</li>
<li class="nav-2">全部订单</li>
</ul>
</li>
<li class="nav-1">网站地图</li>
</ul>
</div>
<div style="width:800px;height:800px;margin:0 auto;border:1px solid lightblue;">
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-22 11:22:17
老师总结：写的很不错 下拉菜单总的来说还是很常用的 而且实现的方法也有很多种 没事可以多练习几种实现的方法
