<!-- 6.2jquery实现动画菜单 --><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*css Document*/
html,body,ul,li{padding:0;margin:0;}
body{font:10px;}
ul li{list-style-type:none;text-transform:capitalize;}
.clear{clear:both;*display:inline;/*IE only*/}/*menu*/
.top-nav{font-size:14px;font-weight:bold;list-style:none;}
.top-nav li{float:left;margin-right:1px;}
.top-nav li a{line-height:20px;text-decoration:none;background-color:#ddd;color:#666;display:block;width:80px;text-align:center;}
.top-nav li ul{list-style:none;display:none;padding:0;position:absolute;}
.top-nav li a:hover{background:url(slide-pannel_14.png) 0 0 repeat-x;} /*//00位置*/
.note{color:#3f240e;display:block;background:url(slide-pannel_14.png) 0 0 repeat-x;}.corner{display:block;height:13px;background:url(play.png) 28px 0 no-repeat; } /*//箭头12*24px*/
</style>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".top-nav li").mousemove(function(){
$(this).find("ul").slideDowm("1000");
})；
$(".top-nav li").mouseleave(function(){
$(this).find("ul").slideUp("slow");
});
});</script>
</head>
<body> <ul class="top-nav">
<li><a href="#"><span class="note">首页</span></a></li>
<li><a href="#">课程大厅</a></li>
<li><a href="#">学习中心+</a>
<ul>
<span class="corner"></span>
<li><a href="#">前端课程+</a> </li>
<li><a href="#">手机开发</a></li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html><!-- //失败没有实现，不知道那部分错了 -->
