鼠标悬浮显示二级菜单效果的jquery实现

当鼠标悬浮时显示二级菜单，这种类似的效果，想必大家在浏览网页时经常会遇到吧，下面有个示例，大家可以看看

1.布局：

2.js控制：
 

1. function dropMenu(obj) {  
2. $(obj).each(function () {  
3. var theSpan = $(this);  
4. var theMenu = theSpan.find(".drop");  
5. var tarHeight = theMenu.height();  
6. theMenu.css({ height: 0, opacity: 0 });  
7.  
8.  
9. var t1;  
10.  
11.  
12. function expand() {  
13. clearTimeout(t1);  
14. //theSpan.find('a').addClass("selected");  
15. theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);  
16. }  
17.  
18.  
19. function collapse() {  
20. clearTimeout(t1);  
21. t1 = setTimeout(function () {  
22. // theSpan.find('a').removeClass("selected");  
23. theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {  
24. $(this).css({ display: "none" });  
25. });  
26. }, 250);  
27. }  
28.  
29.  
30. theSpan.hover(expand, collapse);  
31. theMenu.hover(expand, collapse);  
32. });  
33. }