求 360 导航js 效果 插件

好人啊

自己写的也行

怎么没人呢

css:
<style>
*{margin:0;padding:0;}
dl{ margin:50px; width:50px; position:relative;}
dt{ width:50px; height:20px; border:1px solid #ccc;}
dd{ display:none; position:absolute; left:0; top:22px;}
li a{ display:block; width:50px; height:20px; margin-top:1px; border:1px solid #ccc;}
</style>
html:
<dl>
<dt><a href="javascript:;">baidu</a></dt>
<dd>
<ul>
<li class="on"><a href="javascript:;">baidu</a></li>
<li><a href="javascript:;">google</a></li>
<li><a href="javascript:;">360</a></li>
<li><a href="javascript:;">soso</a></li>
</ul>
</dd>
</dl>
js:
<script>
$("dt").click(function(){
$("dd").toggle();
}).next().find("li").click(function(){
$(this).addClass("on").siblings().removeClass("on").parents("dd").hide();
$("dt").html($(".on").html());
});
</script>
jQuery实现。

var s = 0;
$("dt").click(function(){
s=1;
}).next().find("li").click(function(){
$(this).addClass("on").siblings().removeClass("on");
$("dt").html($(".on").html()).next("dd").hide();
s = 0;
});
$(document).click(function(){
if(s==1){
$("dd").toggle();
s = 0;
}else{
$("dd").hide();
}
});
JQ完善了下，点击空白位置也可以隐藏