自定义下拉框

style：

*{margin: 0;padding: 0;}
li{list-style: none;}
.sewvmain{width:1000px;margin:50px auto;text-align: ;}
.sewv{position: relative;width: 100px;display: inline-block;vertical-align: middle;}
.sewvtop{width:100%;height:23px;border: 1px #D9D9D9 solid;cursor:pointer;border-radius: 2px;overflow: hidden;}
.sewvtop:hover{border:1px #57c5f7 solid;}
.sewvtop>span{float:left;width:70%;height:23px;white-space:pre;text-overflow:ellipsis;overflow: hidden;font-size: 12px;line-height:22px;color: #666;padding:0 5px;vertical-align: middle;}
.sewvtop>em{float:right;width: 20px;height: 20px;vertical-align: middle;}
.sewvbm{width: 100%;position: absolute;left: 0;top: 25px;display: none;border: 1px #D9D9D9 solid;border-radius: 2px;}
.sewvbm>li{cursor:pointer;width:100%;height:20px;line-height:20px;font-size: 12px;color: #666;padding-left:5px;}
.sewvbm>li:hover{background: #57c5f7;color: #fff;}
.lbaxztop{animation: rotatete 0.3s linear forwards;}
.lbaxztop2{animation: rotatete2 0.3s linear forwards;}
@keyframes rotatete{
	from{transform: rotate(0deg);}
	to{transform: rotate(180deg);}
}
			
@keyframes rotatete{
	from{transform: rotate(0deg);}
	to{transform: rotate(180deg);}
}
			
@-moz-keyframes rotatete2{
	from{transform: rotate(180deg);}
	to{transform: rotate(0deg);}
}
@keyframes rotatete2{
	from{transform: rotate(180deg);}
	to{transform: rotate(0deg);}
}

js:

$(document).ready(function(){
	//子导航展开收缩
	$(".sewvtop").click(function(){
		$(this).find("em").removeClass("lbaxztop2").addClass("lbaxztop").parents(".sewv").siblings().children(".sewvtop").find("em").removeClass("lbaxztop").addClass(".lbaxztop2");
		$(this).next(".sewvbm").toggle().parents(".sewv").siblings().find(".sewvbm").hide();
	});
				
				
	/*鼠标离开下拉框关闭*/
	$(".sewv").mouseleave(function(){
		$(".sewvbm").hide();
		$(this).children(".sewvtop").find("em").addClass("lbaxztop2");
	});
				
				
	//赋值
	$(".sewvbm>li").click(function(){
		var selva=$(this).text();
		$(this).parents(".sewvbm").siblings(".sewvtop").find("span").text(selva);
		$(this).parent("ul").hide();
		$(this).parents(".sewv").children(".sewvtop").find("em").addClass("lbaxztop2");
	});
				
});

html:

<div class="sewvmain">
	<div class="sewv">
		<div class="sewvtop"><span>请选择..</span><em><img src="image/selebom.png"></em></div>
	         <ul class="sewvbm">
	         	<li>文本a1</li>
	         	<li>文本b</li>
	         	<li>文本c</li>
	         	<li>文本d</li>
	         	<li>文本e</li>
	         </ul>			
		</div>
		<div class="sewv">
			<div class="sewvtop"><span>请选择..</span><em><img src="image/selebom.png"></em></div>
	         <ul class="sewvbm">
	         	<li>文本a2</li>
	         	<li>文本b</li>
	         	<li>文本c</li>
	         	<li>文本d</li>
	         	<li>文本e</li>
	         </ul>			
		</div>
		<div class="sewv">
			<div class="sewvtop"><span>请选择..</span><em><img src="image/selebom.png"></em></div>
	         <ul class="sewvbm">
	         	<li>文本a3</li>
	         	<li>文本b</li>
	         	<li>文本c</li>
	         	<li>文本d</li>
	         	<li>文本e</li>
	         </ul>			
	</div>	
</div>