下面使用Jquery类库来实现菜单的淡入淡出、展开收缩效果，代码很好学习，一看就会了，那么来看下实例吧。
Jquery菜单效果源码：
html Code
[http://www.xueit.com]
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jQuery淡入淡出、展开收缩菜单</title>
6 <style type="text/css">
7 ul li{list-style:none;}
8 ul li.menu{position:relative;width:120px;}
9 ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;}
10 ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style>
11 <script language="javascript" src="jquery.js"></script>
12 <script language="javascript" type="text/javascript">
13 $(document).ready(function(){
14 $(".menu").hover(
15 function(){
16 //$(".content").fadeIn(800); // 淡入
17 $(".content").slideDown(800); // 展开
18 },function(){
19 //$(".content").fadeOut(1000) // 淡出
20 $(".content").slideUp(1000) // 收缩
21 });
22 })
23 </script>
24 </head>
25 <body>
26 <ul>
27 <li class="menu">
28 <a>弹出菜单</a>
29 <ul class="content">
30 <li><a href="#">菜单内容1</a></li>
31 <li><a href="#">菜单内容2</a></li>
32 <li><a href="#">菜单内容3</a></li>
33 <li><a href="#">菜单内容4</a></li>
34 <li><a href="#">菜单内容5</a></li>
35 </ul>
36 </li>
37 </ul>
38 </body>
39 </html>
可以直接复制代码到本地来测试效果，不过要有jquery.js文件哦。
Jquery最新版本下载地址：
http://www.xueit.com/html/2009-03/33_992_00.html
