需求说明：
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
用户将光标移动到“最新动态页”或“帮助查询”菜单上时，其二级菜单滑入显示 当鼠标从“最新动态页”或“帮助查询”菜单上移出时，其二级菜单滑出隐藏
实现思路：
新建 HTML 页面，在页面上使用无序列表显示一级菜单
在“最新动态页”和“帮助查询”菜单中加入二级菜单，二级菜单默认状态为隐藏
当鼠标悬浮在一级菜单上时，菜单的背景色变为红色，字体颜色变为白色
为一级菜单的鼠标移入、移出事件绑定方法，实现二级菜单的滑入滑出效果
当鼠标悬浮在二级菜单上时，菜单的背景色变为红色，字体颜色变为白色
实现代码：
核心代码：
<script type="text/javascript"> $(function(){ $("#menu>li:has(ul)").hover( function(){ $(this).find('ul').slideDown(500); }, function(){ $(this).find('ul').slideUp(500); } ) }) </script>
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size: 14px; } ul{ list-style: none; } a{ text-decoration: none; color: #000; } #wrap{ position: relative; top: 0px; width: 876px; height: 34px; line-height: 34px; margin: 0 auto; } #menu li{ float: left; display: block; width: 92px; height: 37px; line-height: 37px; text-align: center; margin-right: 2px; } #menu li a{ display: block; background: #edebec; font-size: 14px; color: #333; width: 92px; height: 37px; line-height: 37px; } #menu li a:hover{ background: red; color: white; } #menu li ul{ position: absolute; top: 37; width: 90px; display: none; border: 1px solid #ce070e; border-top: none; background: #fff; } #menu li ul li{ float: left; width: 90px; height: 37px; line-height: 37px; } #menu li ul ll a:link{ width: 90px; height: 37px; line-height: 37px; } #menu li ul li a:hover{ color: white; text-decoration: none; } </style> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#menu>li:has(ul)").hover( function(){ $(this).find('ul').slideDown(500); }, function(){ $(this).find('ul').slideUp(500); } ) }) </script> </head> <body> <div id="wrap"> <ul id="menu"> <li><a href="#">网站首页</a></li> <li><a href="#">最新动态页</a> <ul> <li><a href="#">源码爱好者</a></li> <li><a href="#">编程导航</a></li> <li><a href="#">网页特效</a></li> </ul> </li> <li><a href="#">产品预订</a></li> <li><a href="#">帮助查询</a> <ul> <li><a href="#">时速快递</a></li> <li><a href="#">太空一号</a></li> <li><a href="#">蜘蛛侠前传</a></li> <li><a href="#">未来战士</a></li> <li><a href="#">蟒蛇之灾</a></li> </ul> </li> <li><a href="#">会员俱乐部</a></li> <li><a href="#">凯撤论坛</a></li> </ul> </div> </body> </html>
