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>
