自定义下拉列表

html:

<div class="filter_widget" >
    <dl class= "select">
        <dt class= "cur">1 小时</dt>
        <dd>
            <ul>
                <li class="current" ><a href="javascript:void(0);" >1小时 </a></li>
                <li><a href="javascript:void(0);" >2小时 </a></li>
                <li><a href= "javascript:void(0);">3小时</a></li>
                <li><a href= "javascript:void(0);">4小时</a></li>
            </ul>
        </dd>
    </dl>
</div>

css:

.select {
    position: relative;
    float: left;
    font-size : 16px ;
}
.select dt {
    height: 28 px;
    display: inline-block;
    background : #111 url ("../images/caret.fw.png") no-repeat 147px 12 px;
    line-height : 28px ;
    color: #fff ;
    padding-left : 10px ;
    cursor: pointer;
    width: 145 px;
    padding-right : 10px ;
    white-space : nowrap;
    text-overflow : ellipsis;
    overflow: hidden;
    position: relative;
    z-index: 99 ;
}
.select dd {
    position: absolute;
    left: 0 ;
    top: 33 px;
    background : #111;
    box-shadow : 0 0 5px #111;
    display: none;
}
.select dd ul {
    width: 165 px;
    max-height : 250px ;
    overflow: auto;
}
.select dd ul li a {
    display: block;
    padding: 0 10 px;
    color: #fff ;
    line-height : 28px ;
    border-bottom : 1px solid #444;
}
.select dd ul li: last-child a { border: none; }
.select dd ul li a: hover,. select dd ul . current a {
    background-color : #4dafc9;
}

js：

$('.select dt').click(function(){
    var s = $(this).parent('.select');
    $(this).addClass('cur');
    s.children('dd').slideDown(200);
    var z= parseInt(s.css("z-index"));
    s.css("z-index", z + 1);
});
$('.select dd ul li a').click(function(){
    var s =  $(this).closest('.select');
    s.find('dt').html($(this).html());
    $(this).closest('dd').slideUp(200);
    s.find('dt').removeClass('cur');
    var z= parseInt(s.css("z-index"));
    s.css("z-index", z);
});