<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>魅族导航--鼠标经过列表依次显示效果</title> <style> *{ margin:0; padding:0; } ul,li{ list-style:none; } .clearfix{ zoom:1; } .clearfix:after{ content:"."; display:block; width:0; height:0; visibility:hidden; clear:both; } .header{ width:600px; height:300px; margin:0 auto; position:relative; } .header li{ float:left; text-align:center; } .header-ul1{ background:#ccc; } .header-ul1>li{ width:100px; text-align:center; background:#ccc; height:50px; line-height:50px; z-index:99999 } .header-ul1>li.active{ background:darkgoldenrod; } .header-ul2 i{ display:block; width:100px; height:100px; background:url("mobile.png") no-repeat center; background-size:contain; } .header-wrapper{ width:100%; height:0; animation:all 1s; overflow:hidden; position:absolute; top:50px; z-index:99; left:0; } .header-wrapper li{ opacity:0; } .header-wrapper.header-show{ background:#00b2de; animation:wrapper-show .8s forwards; } @-webkit-keyframes wrapper-show { from { height: 0 } to { height: 142px } } .header-wrapper.header-show li{ opacity: 1 9 ; filter: alpha(opacity=100); -webkit-animation: sub-enter .8s forwards; animation:sub-enter 1s forwards } .header-wrapper.header-show li:nth-child(1){ -webkit-animation-delay: 0s; animation-delay: 0s } .header-wrapper.header-show li:nth-child(2){ -webkit-animation-delay: .4s; animation-delay: .4s } .header-wrapper.header-show li:nth-child(3){ -webkit-animation-delay: .8s; animation-delay: .8s } @-webkit-keyframes sub-enter{ from { -webkit-transform: translate(70px); transform: translate(70px); opacity: 0; filter: alpha(opacity=0) } to { -webkit-transform: translate(0); transform: translate(0); opacity: 1; filter: alpha(opacity=100) } } </style> </head> <body> <div class="header"> <ul class="header-ul1 clearfix"> <li>官网</li> <li data-index="1"> 手机 <div class="header-wrapper" data-index="1"> <ul class="header-ul2 clearfix"> <li> <i></i> <span>手机</span> </li> <li> <i></i> <span>OPPO R9</span> </li> <li> <i></i> <span>OPPO R9</span> </li> </ul> </div> </li> <li>耳机</li> <li data-index="2">充电器 <div class="header-wrapper" data-index="2"> <ul class="header-ul2 clearfix"> <li> <i></i> <span>充电器</span> </li> <li> <i></i> <span>OPPO R9</span> </li> <li> <i></i> <span>OPPO R9</span> </li> </ul> </div> </li> <li>配件</li> <li data-index="3"> 智能 <div class="header-wrapper" data-index="3"> <ul class="header-ul2 clearfix"> <li> <i></i> <span>智能</span> </li> <li> <i></i> <span>OPPO R9</span> </li> <li> <i></i> <span>OPPO R9</span> </li> </ul> </div> </li> </ul> </div> </body> <script src="jquery-1.11.3.min.js"></script> <script> $(".header-ul1 li").each(function(){ var $index=$(this).attr("data-index"),$this=$(this); $this.hover( function(){ $this.addClass("active"); if($this.attr("data-index")){ $(".header-wrapper[data-index="+$index+"]").addClass("header-show") } },function(){ $this.removeClass("active"); if($this.attr("data-index")){ $(".header-wrapper[data-index="+$index+"]").removeClass("header-show") } } ); }); </script> </html>