仿select 下拉列表

CSS 代码
[css]
body{ font-size: 12px;}
.c_dropdown{float:left;text-align:left;}
.button_style{
width: 125px;
border:1px solid #43d227;
padding:0 15px 0 0;
height:26px;
color:#146a00;
line-height:24px;
text-align:left;
cursor:pointer
}

*.button_style{_line-height:20px;}

.c_dropdown ul{
display:block;
position:absolute;
left:0;
z-index:9999;
border:1px solid #43d227;
margin:0;
padding:0;
height:auto;
width:140px;
background:#fff;
text-align:left;
list-style:none;
top:-1px;
}
.c_dropdown ul li {
overflow:hidden;
margin:1px 0;
display:block;
height:28px;
margin:0;
color:#666;
line-height:28px;
text-decoration:none;
text-indent:3px;
border-bottom:1px solid #e7e7e7;
}
*.c_dropdown ul li {*line-height:26px;*overflow:hidden}
.c_dropdown ul li a:hover{color:#fff;background:#666}
.c_dropdown .c_dropdown_current a{color:#146a00}
.active {color: #FF0000;}
[/css]

JS 代码
[js]
var checkdown_list;
var show_dropdown = false;
$(function() {
$("#dropdown").click(function(event) {
if (show_dropdown) {
hide();
} else {
show();
event.stopPropagation();
}
}).focus(function() {
checkdown_list = true;
});

$('#dropdown_list li').click(function(event){
checkdown_list = true;
event.stopPropagation();
});
});

function show(obj) {
if (null != checkdown_list) {
hide();
}
show_dropdown = true;
$("#dropdown_list").show();
$(document).bind("click", hide);
$('#dropdown').trigger('focus');
}

function hide(obj) {
if (checkdown_list != null && show_dropdown) {
$("#dropdown_list").hide();
$('#dropdown').toggleClass('active');
$(document).unbind("click", hide);
checkdown_list = null;
show_dropdown = false;
}
}
[/js]

HTML 代码
[html]
<div class="c_dropdown">
<div id="dropdown" class="button_style"><span id="selected_bifg_id_10">未分组</span></div>
<div style="position: relative; height: 0px; z-index: 9999;">
<ul id="dropdown_list" class="checkList" style="display:none;">
<li><span><input id="multi_friend_1" name="fs_checkbox" type="checkbox" />朋友</span></li>
<li>
<span><input id="multi_friend_2" name="fs_checkbox" type="checkbox" />同学</span></li>
<li><span><input type="text" value="新建分组" /></span></li>
</ul>
</div>
</div>
[/html]
demo: 仿select 下拉列表demo