爱站程序员基地效果图：
重点：
鼠标进入事件mouseenter 鼠标离开事件mouseleave
下拉动画slideDown /收起动画slideUp
执行下一次操作前都要先通过.stop() 停止动画
全部代码
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style type=\"text/css\">.menu>li{float: left;width:200px ;height: 60px;background-color: #DAA520;list-style: none;text-align: center;line-height: 60px;}.menu>li>ul{list-style: none;display: none;background-color: #FF0000;}.menu>li:hover{background-color: red;}</style></head><body><div class=\"wrap\"><ul class=\"menu\"><li class=\"current\">123<ul class=\"show\"><li>123 <span></span></li><li>123<span></span></li><li>123<span></span></li></ul></li><li>123<ul><li>123<span></span></li><li>123<span></span></li><li>123<span></span></li></ul></li><li>123<ul><li>123<span></span></li><li>123<span></span></li><li>123<span></span></li></ul></li></ul></div></body><script src=\"./js/jquery-3.1.1.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script><script type=\"text/javascript\">$(function(){var $li=$(\".wrap>ul>li\")// 鼠标进入事件mouseenter 鼠标离开事件mouseleave$li.mouseenter(function () {// 下拉动画slideDown// 再执行下一次操作前都要先通过.stop() 停止动画$(this).children(\"ul\").stop().slideDown();});$li.mouseleave(function () {//收起动画slideUp$(this).children(\"ul\").stop().slideUp();});});</script></html>
