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>
