《Web前端开发》实验指导/实验八:下拉菜单 webkit-animation-delay: 0.05s; #nav li: hover ul li nth-child( 3)( kit-animation-delay: 0. 1s #nav li: hover ul li nth-child(4)( -moz-animation-delay: 0. 15s webkit-animation-delay: 0. 15s; #nav Ii: hover ul li nth- child(5)( -moz-animation-delay: 0.2s #nav li: hover ul li nth-child (6)( -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s #nav li hover ul li: nth-child(7)( -animation-delay: 0.3s webkit-animation-delay: 0.3 #nav li: hover ul li nth-child(8)( -moz-animation-delay: 0. 35s webkit-animation-delay: 0.35s: #nav li: hover ul li nth-child(9)( 04s; rebkit-animation-delay: 0. 4s jQuery实现方法,参考代码: JS代码部分: <script src="JS/jquery-18 3. min js"type="text/javascript"></script> <script type="text/javascript"> S(#nav>li").mouseenter(function t S(this).siblings(li"). find( subs").css(display","none") /S(ul. subs").find(""). mouseover(function(e) left: Opx") S(#nav>li"). mouseleave(function(e)i 河南中医学院互联网应用技术研究所 本讲共计12页|当前第7页《Web 前端开发》实验指导 / 实验八:下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 7 页 -webkit-animation-delay: 0.05s; } #nav li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #nav li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #nav li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #nav li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #nav li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #nav li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; } #nav li:hover ul li:nth-child(9) { -moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; } jQuery 实现方法,参考代码: JS 代码部分: <script src="JS/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#nav>li").mouseenter(function() { $(this).siblings("li").find(".subs").css("display","none"); $(this).find(".subs").slideDown("fast").css("display","block"); /*$("ul.subs").find("li").mouseover(function(e){ $(this).animate({left:"10px"},300); return false; }); $("ul.subs").find("li").mouseout(function(e){ $(this).animate({left:"0px"}); return false; })*/ }); $("#nav>li").mouseleave(function(e) {