<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div模拟下拉菜单j</title>
<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
#divselect{width:118px; margin:80px auto; position:relative; z-index:10000;}
#divselect cite{width:118px; height:18px;line-height:18px; display:block; color:#807a62; text-indent:16px; cursor:pointer;font-style:normal;
border:1px solid #333333;
background:url(xjt.png) no-repeat right center;}
#divselect ul{width:118px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
#divselect ul li{height:18px; line-height:18px;}
#divselect ul li a{display:block; height:18px; color:#333333; text-decoration:none;}
#divselect ul li a:hover{background-color:#CCC;}
#cabmtminadd{float:left;height:18px;width:118px;margin:0px 0 0 0px; background:#999;}
#cabmtminadd:hover{cursor:pointer}
#cabmtminadd .cabmtmgroup{float:left;height:18px;line-height:18px;font-family:Arial; font-size:24px;margin:0px 0 0 0px;}
#cabmtminadd .cabmtmnames{float:left;text-align:left;margin:0px 0 0 20px;}
#divselect ul li .cabmtminput{width:118px;float:left;height:18px;margin:0px 0 0 0px; border-bottom:1px solid #ccc;}
#divselect ul li .cabmtminput input{width:16px;height:16px;float:left;margin:1px 0 0 0px;}
#divselect ul li .cabmtminput .cabmtmname{float:left;text-align:left;margin:0px 0 0 20px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$.divselect("#divselect","#inputselect");
});
jQuery.divselect = function(divselectid,inputselectid) {
var inputselect = $(inputselectid);
$(divselectid+" cite").click(function(){
var ul = $(divselectid+" ul");
if(ul.css("display")=="none"){
ul.slideDown("fast");
}else{
ul.slideUp("fast");
}
});
$(divselectid+" ul li a").click(function(){
var txt = $(this).text();
$(divselectid+" cite").html(txt);
var value = $(this).attr("selectid");
inputselect.val(value);
$(divselectid+" ul").hide();
});
$(document).click(function(){
$(divselectid+" ul").hide();
});
};
</script>
</head>
<body>
<div id="divselect">
<cite>Bedroom</cite>
<ul>
<li><a href="javascript:;" selectid="1"><div class="cabmtminput"><input name="" type="checkbox" value="" /><div class="cabmtmname">Bedroom1</div></div></a></li>
<li><a href="javascript:;" selectid="2"><div class="cabmtminput"><input name="" type="checkbox" value="" /><div class="cabmtmname">Bedroom2</div></div></a></li>
<li><a href="javascript:;" selectid="3"><div class="cabmtminput"><input name="" type="checkbox" value="" /><div class="cabmtmname">Bedroom3</div></div></a></li>
<li><a href="javascript:;" selectid="4"><div class="cabmtminput"><input name="" type="checkbox" value="" /><div class="cabmtmname">Bedroom4</div></div></a></li>
<li><div id="cabmtminadd"><div class="cabmtmgroup">+</div><div class="cabmtmnames">Addgroup</div></div></li>
</ul>
</div>
</body>
</html>