Selectbox模拟实现效果

一、HTML代码：

<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>

二、CSS代码：

* { 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;}