JQ模仿select

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script><script src="http://upcdn.b0.upaiyun.com/libs/modernizr/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="Jselect.js" type="text/javascript"></script>
<style>
*, html {
	margin: 0;
	padding: 0;
}
#body {
	 460px;
	margin: 0 auto;
	height: 300px;
	padding: 5%;
}
ul, li {
	list-style: none;
}
#select {
	height: auto;
	 134px;
	text-align: center;
	border: #a1bcd1 1px solid;
}
#select .first {
	background: url(http://cqcmxy.com:81/Content/Image/icobg_1.4.png) -77px  -112px;
	margin-bottom: 2px;
	display:block;
}
#select li {
	 134px;
	height: 20px;
	line-height: 25px;
	cursor: pointer;
}
#select ul li {
	display: none;
	 134px;
}
</style>
</head>

<body>
<div id="body">
  <div id="select"> <span class="first">1</span>
    <input type="hidden"  value=""/>
    <ul>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
$("#select").Jselect();
</script>
</body>
</html>

$.fn.extend({
	Jselect:function(){
		var me=$(this);
		var li=me.find("li");
		var span=me.find("span");
		var hidden=me.find("input[type=hidden]");
		me.hover(function(){li.show(); span.css({backgroundPosition:"-77px -143px"})},function(){li.hide(); span.css({backgroundPosition:"-77px -113px"})})
		li.hover(function(){
			$(this).css({background:"blue",color:"#fff"});
			},function(){
				$(this).css({backgroundColor:"",color:""});
				})
		li.click(function(){
			me.find("span").html($(this).text());
			hidden.val($(this).text());
			})
		}
	})