1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * 8 { 9 margin: 0; 10 padding: 0; 11 } 12 #con 13 { 14 list-style: none; 15 width: 600px; 16 margin: 50px auto; 17 } 18 #con:after 19 { 20 content: ""; 21 display: block; 22 clear: both; 23 } 24 #con li 25 { 26 float: left; 27 width: 99px; 28 height: 50px; 29 border-right: 1px solid red; 30 background: #ccc; 31 position: relative; 32 } 33 #con span 34 { 35 line-height: 50px; 36 text-align: center; 37 display: block; 38 } 39 #con div 40 { 41 width: 99px; 42 position: absolute; 43 left: 0px; 44 top: 50px; 45 text-align: center; 46 display: none; 47 background: green; 48 } 49 </style> 50 </head> 51 <body> 52 <ul id="con"> 53 <li><span>酒店</span><div>酒店内容</div></li> 54 <li><span>景点</span><div>景点内容</div></li> 55 <li><span>路线</span><div>路线内容</div></li> 56 <li><span>价格</span><div>价格内容</div></li> 57 <li><span>美食</span><div>美食内容</div></li> 58 <li><span>折扣</span><div>折扣内容</div></li> 59 </ul> 60 <script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> 61 <script src="jquery.easing.min.js" type="text/javascript" charset="utf-8"></script> 62 <script> 63 $(function() { 64 $('#con li').mouseover(function() { 65 var i=$(this).index('li'); 66 $('#con li').eq(i).css({'background':'orange','color':'#fff'}); 67 $('#con li div').eq(i).show().stop().animate({'height':'400px'},1500,'easeOutBack'); 68 }) 69 $('#con li').mouseout(function() { 70 var i=$(this).index('li'); 71 $('#con li').eq(i).css({'background':'#ccc','color':'black'}); 72 $('#con li div').eq(i).stop().animate({'height':'0px'},1500,'easeOutBack',function() { 73 $('#con li div').hide(); 74 }) 75 }) 76 }) 77 </script> 78 </body> 79 </html>