jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具，它在性能上极佳，快速滑动，基本无延迟效果，源码位置见对应作者的github，接下来附上样例代码：
1 $(function () {
2 $('.menu-left').menuAim({ // 插件的使用
3 activate: activateSub,
4 deactivate: deactivateSub,
5 exitMenu: exitMenuSub // 必须加，负责处理最后一次移入问题
6 });
7 });
8
9 function activateSub(row) { // 参数row自动获取当前元素
10 var subId = $(row).data('sub-id'),
11 $subMenu = $('#' + subId);
12 $subMenu.show();
13 }
14
15 function deactivateSub() {
16 $('.menu-right li').hide();
17 }
18
19 function exitMenuSub() {
20 return true;
21 }
22
23 $(".menu-right li").mouseover(function () {
24 $(this).show();
25 });
26
27 $('.menu-right li').mouseleave(function () {
28 $(this).hide();
29 });
1 ul {
2 list-style: none;
3 padding: 0;
4 margin: 0;
5 }
6
7 .menu {
8 float: left;
9 }
10
11 .menu-left {
12 width: 200px;
13 float: left;
14 }
15
16 .menu-left li {
17 height: 50px;
18 line-height: 50px;
19 text-align: center;
20 background: #ccc;
21 }
22
23 .menu-right {
24 width: 400px;
25 float: left;
26 }
27
28 .menu-right li {
29 height: 320px;
30 background: #eee;
31 display: none;
32 }
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>navigation</title> 7 <link rel="stylesheet" href="./index.css"> 8 </head> 9 10 <body> 11 <div class="menu"> 12 <ul class="menu-left"> 13 <li data-sub-id="hot">当季热门</li> 14 <li data-sub-id="domestic">国内游</li> 15 <li data-sub-id="overseas">海外游</li> 16 <li data-sub-id="around">周边游</li> 17 </ul> 18 <ul class="menu-right"> 19 <li id="hot"> 20 <div>one</div> 21 <div>one</div> 22 <div>one</div> 23 </li> 24 <li id="domestic"> 25 <div>two</div> 26 <div>two</div> 27 <div>two</div> 28 </li> 29 <li id="overseas"> 30 <div>three</div> 31 <div>three</div> 32 <div>three</div> 33 </li> 34 <li id="around"> 35 <div>four</div> 36 <div>four</div> 37 <div>four</div> 38 </li> 39 </ul> 40 </div> 41 <script src="./jquery.js"></script> 42 <script src="./jquery.menu-aim.js"></script> 43 <script src="./index.js"></script> 44 </body> 45 46 </html>