Fancy select XHTML+CSS+jQuery

<style type="text/css">
	.select {
	    position: relative;
	}
	.select span {
	    width: 287px;
	    height: 39px;
	    display: block;
	    line-height: 39px;
	    padding: 0 20px 0 10px;
	    overflow: hidden;
	    cursor: default;
	}
	.select ul {
	    position: absolute;
	    left: 0;
	    border-left: 1px solid #C2C9D5;
	    border-right: 1px solid #C2C9D5;
	    border-bottom: 1px solid #C2C9D5;
	    background: #FFFFFF;
	    top: 39px;
	    left: 2px;
	    display: none;
	}
	.select ul li {
	    border-bottom: 1px solid #C2C9D5;
		clear:both;
	}
	.select ul a {
	    float: left;
	    padding: 9px 0 9px 20px;
	}
	.select ul a:hover {
	    background: #E9EFFB;
	}
</style>
<script type="text/javascript">
	//fancy select(remember you need jQuery for this to work)
	$('.select a.icon').click(function(){
		var parinte = $(this).parent();
		var rel = $(this).attr('rel');
		if(!rel){
			$('ul',parinte).show();
			$(this).attr('rel','1');
		}else if(rel == 1){
			$('ul',parinte).hide();
			$(this).removeAttr('rel');
		}
		return false;		
	});
	$('.select ul a').click(function(){
		var textul = $(this).html();
		var parinte = $(this).parent().parent().parent();
		$('a.icon',parinte).html(textul).removeAttr('rel');
		$(this).parent().parent().hide();
		return false;
	});
</script>
 
<div class="select">
     <a href="" title="" class="icon">select something</a>
     <ul class="menu">
	<li><a href="" title="">select1</a></li>
	<li><a href="" title="">select2</a></li>
	<li><a href="" title="">select3</a></li>
     </ul>
</div><!--/select-->