摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;paddi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;}
.header{height:50px;width:100%;background:#666;}
.dh{width:800px;margin-left:300px;}
.dh li{float:left;line-height:50px;width:200px;text-align:center;}
.dh .j2dh{width:200px;}
.dh .j2dh li{background:rgba(100,100,100,0.5);width:200px;height:70px;border:1px solid #ccc;line-height:70px;}
.dh2{width:60px;height:30px;}
.j3dh{position:absolute;top:50px;left:500px;width:200px;}
.j3dh>li{background:red;width:120px;height:50px;}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<div>
<ul>
<li>资料
<ul>
<li>今日说法
<ul>
<li>今日说</li>
<li>说什么</li>
<li>说完了</li>
</ul>
</li>
<li>明日说法</li>
<li>说不下去</li>
</ul>
</li>
<li>商城
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li>
<li>新闻
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li>
<li>社区
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$('document').ready(function(){
$('.j2dh').hide();
$('.j3dh').hide();
$('.dh>li').mouseover(function(){
$(this).find('.j2dh').slideDown(300)
// $(this).find('j2dh').slideUp()
})
$('.dh>li').mouseleave(function(){
$('.j2dh').slideUp(300);
})
$('.box').mouseover(function(){
$(this).find('.j3dh').slideDown();
})
$('.box').mouseleave(function(){
$('.j3dh').slideUp();
})
})
</script>
</body>
</html>菜单完全起来还算轻松，就是样子差了点，哈哈哈。不知道那些网站是怎么把同样的效果做成那么炫酷的。
批改老师：韦小宝批改时间：2018-11-09 09:08:16
老师总结：写的很不错！做的炫酷还是得多练习！在练习的过程中可以多尝试一下东西，慢慢的往后去就可以了！那时候你发现这些都并不难！继续加油吧！
