用JQuery制作简单实用的下拉菜单

demo:

 

<script src="jquery.min.js" type="text/javascript"></script>
 2 
 3 <style type="text/css">
 4 #boyicss
 5 {    margin: 0;
 6     padding: 0}
 7 
 8     #boyicss li
 9     {    float: left;
10         list-style: none;
11         font: 12px Tahoma, Arial}
12 
13     #boyicss li a
14     {    display: block;
15         background: #324143;
16         padding: 5px 12px;
17         text-decoration: none;
18         border-right: 1px solid white;
19         width: 70px;
20         color: #EAFFED;
21         white-space: nowrap}
22 
23     #boyicssm li a:hover
24     {    background: #24313C}
25         
26         #boyicss li ul
27         {    margin: 0;
28             padding: 0;
29             position: absolute;
30             visibility: hidden;
31             border-top: 1px solid white}
32         
33             #boyicss li ul li
34             {    float: none;
35                 display: inline}
36             
37             #boyicss li ul li a
38             {    width: auto;
39                 background: #000;
40                 color: #ffffff}
41             
42             #boyicss li ul li a:hover
43             {    background: #8EA344}
44 </style>
45 <script type="text/javascript">
46 var timeout         = 500;
47 var closetimer        = 0;
48 var ddmenuitem      = 0;
49 
50 function jsddm_open()
51 {    jsddm_canceltimer();
52     jsddm_close();
53     ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
54 
55 function jsddm_close()
56 {    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
57 
58 function jsddm_timer()
59 {    closetimer = window.setTimeout(jsddm_close, timeout);}
60 
61 function jsddm_canceltimer()
62 {    if(closetimer)
63     {    window.clearTimeout(closetimer);
64         closetimer = null;}}
65 
66 $(document).ready(function()
67 {    $('#boyicss > li').bind('mouseover', jsddm_open);
68     $('#boyicss > li').bind('mouseout',  jsddm_timer);});
69 
70 document.onclick = jsddm_close;
71 </script>
72 
73 <ul id="boyicss">
74     <li><a href="#" target="_blank">博客园首页</a></li>
75     <li><a href="#" target="_blank">.NET技术</a>
76     <ul>
77         <li><a href="#" target="_blank">.NET新手</a></li>
78         <li><a href="#" target="_blank">ASP.NET</a></li>
79         <li><a href="#" target="_blank">C#</a></li>
80         <li><a href="#" target="_blank">WINFORM</a> </li>
81     </ul>
82     </li>
83     <li><a href="#" target="_blank">编程语言</a></li>
84     <li><a href="#" target="_blank">软件工程</a></li>
85     <li><a href="#" target="_blank">新闻</a> </li>
86 </ul>