摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>課后練習(xí)-自定義動(dòng)畫(huà)菜單</title> &nb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>課后練習(xí)-自定義動(dòng)畫(huà)菜單</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="#">二級(jí)菜單1</a></li>
<li><a href="#">二級(jí)菜單2</a></li>
<li><a href="#">二級(jí)菜單3</a></li>
</ul>
</li>
<li>
<a href="#">菜單2</a>
<ul>
<li><a href="#">二級(jí)菜單1</a></li>
<li><a href="#">二級(jí)菜單2</a></li>
<li><a href="#">二級(jí)菜單3</a></li>
</ul>
</li>
<li>
<a href="#">菜單3</a>
<ul>
<li><a href="#">二級(jí)菜單1</a></li>
<li><a href="#">二級(jí)菜單2</a></li>
<li><a href="#">二級(jí)菜單3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2019-03-01 09:14:40
老師總結(jié)：寫(xiě)的很不錯(cuò) 有點(diǎn)想法 沒(méi)事的時(shí)候要記得多去練習(xí)