摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航动画小案例</title> <script type="text/javascript" src="j
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航动画小案例</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul{list-style: none}
.nav{height: 35px;width: 500px;background: pink;margin: 0px auto;margin-top:30px;}
ul li{width: 124px;height: 35px;line-height: 35px;text-align: center;float: left;border-right:1px solid white;}
.ul_2 li{width: 124px;height: 30px;line-height: 30px;text-align: center;background: pink;position: relative;}
.ul_2 li:hover{background: yellow;}
.ul_3{position: absolute;top: 0px;left: 124px}
.ul_3 li{width: 124px;height: 30px;line-height: 30px;text-align: center;background: red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.ul_2').hide()
$('.ul_3').hide()
$('.ul_1>li').mouseover(function(){
$(this).find('.ul_2').slideDown(1000)
})
$('.ul_1>li').mouseleave(function(){
$(this).find('.ul_2').slideUp(1000)
})
$('.ul_2_1').mouseover(function(){
$(this).find('.ul_3').fadeIn(1000)
})
$('.ul_2_1').mouseleave(function(){
$(this).find('.ul_3').fadeOut(300)
})
})
</script>
</head>
<body>
<div class="nav">
<ul class="ul_1"><!-- 一级下拉菜单 -->
<li>肉食类
<ul class="ul_2"><!-- 二级下拉菜单 -->
<li class="ul_2_1">大盘鸡
<!-- <ul class="ul_3">三级下拉菜单
<li>不知道写啥</li>
<li>不知道写啥</li>
<li>不知道写啥</li>
</ul> -->
<div class="ul_3"><img src="images/1.jpg" width="400" height="300"></div><!-- 三级 -->
</li>
<li class="ul_2_1">水煮肉片
<!-- <ul class="ul_3">三级下拉菜单
<li>不知道写啥</li>
<li>不知道写啥</li>
<li>不知道写啥</li>
</ul> -->
<div class="ul_3"><img src="images/2.jpg" width="400" height="300"></div><!-- 三级 -->
</li>
<li class="ul_2_1">回锅肉
<div class="ul_3"><img src="images/3.jpg" width="400" height="300"></div>
</li>
<li class="ul_2_1">剁椒鱼头
<div class="ul_3"><img src="images/4.jpg" width="400" height="300"></div>
</li>
</ul>
</li>
<li>蔬菜类
<ul class="ul_2">
<li class="ul_2_1">番茄炒西红柿
<ul class="ul_3">
<li>这菜你也点？</li>
<li>这菜你也点？</li>
<li>这菜你也点？</li>
</ul>
</li>
<li class="ul_2_1">土豆炒马铃薯
<ul class="ul_3">
<li>这菜你也点？</li>
<li>这菜你也点？</li>
<li>这菜你也点？</li>
</ul>
</li>
<li>辣椒炒鸡蛋</li>
<li>地三鲜</li>
</ul>
</li>
<li>酒水类
<ul class="ul_2">
<li>啤酒</li>
<li>白酒</li>
<li>热水</li>
<li class="ul_2_1">饮料
<ul class="ul_3">
<li>冰红茶</li>
<li>酸梅汁</li>
<li>饮料喝多了不好</li>
</ul>
</li>
</ul>
</li>
<li>甜点类
<ul class="ul_2">
<li>蛋糕</li>
<li>蛋挞</li>
<li>提拉米苏</li>
<li>巧克力</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-19 14:45:56
老师总结：完成的不错！导航样式还可以好看点哦，知识点已掌握 继续加油！
