abstract：总结：多练很重要，但是用心记住更重要。代码：<!DOCTYPE html><html><head> <title>jQuery案例</title> <style type="text/css"> *{margin:0px; padding:0px;} .menu{ width:808px; he
总结：
多练很重要，但是用心记住更重要。
代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery案例</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.menu{
width:808px;
height: 35px;
margin:0px auto;
background: #ccc;
margin-top:20px;
color:#000;
border:1px solid #ffafc9;
border-radius: 5px;
}
ul{list-style: none;}
ul li{width:100px; height: 35px; line-height: 35px; text-align: center; float:left; border-right:1px solid #fff; cursor: pointer;}
#cl{border-right:none;}
.twobox li{
width: 100px;height: 30px;line-height: 30px;
background: #eee;color: #393939; font-size: 14px;
position: relative;border-bottom: 1px dotted #ffafc9;
}
.twobox li:hover {background: #000;color: #fff;}
.three {position: absolute; top: 0px;left: 100px;}
.three li {width: 120px;height: 30px;line-height: 30px;border: 0;}
</style>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//隐藏二级与三级菜单
$('.twobox').hide();
$('.three').hide();
//当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(300);
})
//当鼠标移出到包含二级菜单的一级菜单时隐藏当前二级菜单
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(300);
})
//当鼠标移动到包含三级菜单的二级菜单时显示三级菜单
$('.two').mouseover(function(){
$(this).find('.three').slideDown(300);
})
//当鼠标移出包含三级菜单的二级菜单时隐藏三级菜单
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(300);
})
})
</script>
</head>
<body>
<div class="menu">
<ul class="one"> <!-- 一级下拉菜单 -->
<li>首页</li>
<li >动画
<ul class="twobox">
<li>MAD AWV</li>
<li class="two">MMD 3D
<ul class="three">
<li>舞蹈MMD</li>
<li>剧情MMD</li>
<li>原创模型</li>
<li>镜头配布</li>
</ul>
</li>
<li class="two">短片 手书 配音
<ul class="three">
<li>手书</li>
<li>五等分的新娘</li>
<li>杀戮天使</li>
<li>原创动画</li>
</ul>
</li>
<li>综合</li>
</ul>
</li>
<li>番剧
<ul class="twobox">
<li>连载动画</li>
<li class="two">完结动画
<ul class="three">
<li>中二病也要谈恋爱</li>
<li>只有神知道的世界</li>
<li>我的英雄学院</li>
<li>约会大作战 OVA</li>
</ul>
</li>
<li>咨询</li>
<li>官方延伸</li>
<li>新番时间表</li>
<li>番剧索引</li>
</ul>
</li>
<li>国创</li>
<li>鬼畜</li>
<li>数码</li>
<li>直播</li>
<li id="cl">纪录片</li>
</ul>
</div>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-02-15 15:27:54
Teacher's summary：多练习记住的和你直接去用心硬记是不一样的 多练习你可以还会从之前写过的代码中获取到新的知识