摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>课后练习-自定义动画菜单</title> &nb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课后练习-自定义动画菜单</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
.wrap{width: 300px;height: 30px;margin: 100px auto 0;background-color: #333;}
.wrap li{background-color:#999;}
.wrap > ul > li{float: left;position: relative;}
.wrap a{display: block;height: 30px;width: 100px;text-decoration: none;color: #fff;line-height: 30px;text-align: center;}
.wrap li ul{position: absolute;top: 30px;display: none;}
.wrap li ul li:hover{background-color:#333;}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
var nav = $('.wrap>ul>li');
nav.mouseenter(function () {
$(this).children('ul').stop().slideDown(500);
});
nav.mouseleave(function () {
$(this).children('ul').stop().slideUp(500);
})
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#">菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-03-01 09:14:40
老师总结：写的很不错 有点想法 没事的时候要记得多去练习
