<div id="selectBox">
    <div id="cats_seltor"><span>全部</span><em></em></div>
    <dl id="cats_lks">
        <dd><a href="#all_svys">全部</a></dd>
        <dd><a href="#social_svys">社会</a></dd>
        <dd><a href="#emotion_svys">情感</a></dd>
        <dd><a href="#product_svys">产品</a></dd>
        <dd><a href="#happiness_svys">开心</a></dd>
        <dd><a href="#literary_svys">文体</a></dd>
        <dd><a href="#finance_svys">财经</a></dd>
        <dd><a href="#tech_svys">科技</a></dd>
        <dd><a href="#point_svys">点子俱乐部</a></dd>
    </dl>
</div>

* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#333;}
a { text-decoration:none;}
#selectBox { margin:100px; position:relative; width:116px;}
#cats_seltor { height:22px; cursor:pointer;}
#cats_seltor span, #cats_seltor em { float:left; display:block;}
#cats_seltor span { border:1px solid #d4d5d8; width:74px; height:20px; line-height:20px; border-right:none; padding:0 10px; color:#f60; overflow:hidden;}
#cats_seltor em { width:20px; height:22px; background:url(arrow.png) no-repeat;}
#cats_seltor em.down { background-position:0 -30px;}
#cats_lks { width:114px; border:1px solid #d4d5d8; border-top:none; position:absolute; top:22px; left:0; background:#fff; display:none; z-index:10;}
#cats_lks dd { padding:2px 6px;}
#cats_lks dd a { color:#666; display:block; padding:1px 4px;}
#cats_lks dd a:hover { color:#fff; background:#f60;}

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	$('#cats_seltor').click(function() {
		$('em', this).toggleClass('down');
		$('#cats_lks').toggle();
	});
 
	$('#cats_lks a').click(function() {
		var _text = $(this).text();
 
		$('#cats_lks').hide();
		$('#cats_seltor').find('span').text(_text)
					.end().find('em').removeClass('down');
		return false;
	});
});
</script>