利用Css+jQuery制作下拉菜单

<p id="select_box">
 <dl id="types">
 <dt><span id="select_type">请选择</span></dt>
 <dd>百货</dd>
 <dd>生活用品</dd>
 <dd>电脑外设</dd>
 <dd>数码产品</dd>
 </dl></p>

a{ 
 text-decoration: none;
}
#select_box{ 
 position: relative; 
 top: 10px; 
 left: 0px; 
 display: inline-block; 
 width: 192px;
}
#select_box dl{ 
 float: left; 
 width: 192px; 
 height: 32px; 
 background: #FFFFFF; 
 cursor: pointer; 
 z-index: 100;
}
#select_box dl dt{ 
 width: 172px; 
 height: 32px; 
 line-height: 34px; 
 font-size: 1em; 
 color: #fff; 
 background:url(../img/select_bg.png) no-repeat center right; 
 background-color:rgb(60,179,113); 
 margin: 0; 
 padding-left: 20px;}
#select_box dl dd{ 
 position: relative; 
 left: -40px; 
 width: 172px; 
 height: 32px; 
 line-height: 32px; 
 font-size: .9em; 
 color: #FFFFFF; 
 background: #2A8F57; 
 padding-left: 20px; 
 z-index: 10;
}

$(function(){
 $("#types dd").hide();
 $("#select_box").toggle(function(){
 $("#types dd").stop(true,false).slideDown(200);
 },function(){
 $("#types dd").stop(true,false).slideUp(200);
 });
 $("#types dd").click(function(){
 var type_val=$(this).html();
 $("#types dt").html(type_val);
 $("#types dd").stop(true,false).slideUp(200);
 });
 })