模拟下拉框

 

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

.pages{ margin-top:10px; float:right;}
.page_left{ float:left; height:26px; line-height:26px; color:#222;}
.select_bg{ position:relative; cursor:pointer;}
.select_bg_left{ float:left; width:4px; height:28px; background:url(../images/select_bg_left.png) no-repeat;}
.select_bg_right{ float:left; width:4px; height:28px; background:url(../images/select_bg_right.png) no-repeat;}
.select_bg_center{ float:left; width:auto; height:28px; background:url(../images/select_bg_center.png) repeat-x;}
.page_right{ float:left;}
.page_bg_left{ float:left; width:4px; height:26px; background:url(../images/page_bg_left.png) no-repeat;}
.page_bg_right{ float:left; width:4px; height:26px; background:url(../images/page_bg_right.png) no-repeat;}
.page_bg_center{ float:left; width:auto; height:26px; background:url(../images/page_bg_center.png) repeat-x;}
.page_bg_center span{float:left; width:45px; margin-top:4px; text-align:center; color:#555;}
.page_bg_center a.select_down{ float:left; margin-top:4px; width:17px; height:18px; display:block; background:url(../images/select_down.png) no-repeat;}
.select_list{ display:none; position:absolute; z-index:9999; background:#fff; left:0; top:26px; margin:0; padding:0; width:70px; border:1px solid #ddd; text-align:center;}
.select_list li a{ color:#555; width:100%; height:20px; line-height:20px; display:block;}
.select_list li a:hover{ background:#eee;}

 

<div class="select_bg select_bg0">
<div class="page_bg_left"></div>
<div class="page_bg_center">
<span>1</span><a class="select_down"></a><ul class="select_list select_list0"><li><a href="#">10</a></li><li><a href="#">20</a></li><li><a href="#">30</a></li></ul>
</div>
<div class="page_bg_right"></div>
</div>

 

 

var win = ($.browser.msie) ? document : window;
$(win).click(function() {
$(".select_list0").css("display","none");
});

$(document).ready(function() {
$(".select_bg0").click(function(event) {
$('.select_list0').toggle();
//防止冒泡
stopPropagation(event);
});

});

function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) {
//W3C阻止冒泡方法
e.stopPropagation();
} else {
//IE阻止冒泡方法
e.cancelBubble = true;
}
}