下拉菜单
css部分
<style type="text/css">#drop_down_list{list-style:none;}#drop_down_list li{float:left;width:120px;}#drop_down_list li a{display:block;background: #324143;color: #EAFFED;border-right: 2px white solid;text-decoration: none;}#drop_down_list li a:hover{background: #24313C;}#drop_down_list li ul{visibility: hidden;float:left;padding-left:0px;width:120px;list-style:none; }#drop_down_list li ul li a{background: #A9C251;}#drop_down_list li ul li a:hover{background: #8EA344;}</style>?
jquery 部分
<script type="text/javascript">var drop_down_ul = 0; var timeout = 1000;var close_timer = 0; function cancel_timeout(){if(close_timer){window.clearTimeout(close_timer);close_timer = null; }}function limsover(){cancel_timeout();drop_down_close();drop_down_ul = $(this).find("ul").eq(0).css("visibility", "visible");}function drop_down_close(){if(drop_down_ul){drop_down_ul.css("visibility", "hidden");}}function drop_down_timer(){close_timer = window.setTimeout(drop_down_close, timeout);}$(document).ready(function(){$("#drop_down_list > li").bind("mouseover", limsover);$("#drop_down_list > li").bind("mouseleave", drop_down_timer);});</script>?
?html部分
<ul id="drop_down_list"><li><a href="#">Search Engine</a><ul><li><a href="http://www.baidu.com/">baidu</a></li><li><a href="http://www.google.com/">google</a></li></ul></li><li><a href="#">social network</a><ul><li><a href="http://renren.com/">renren</a></li><li><a href="http://pengyou.com/">pengyou</a></li></ul></li></ul>?