利用Css+jQuery制作下拉菜单

html

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

css

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

jQuery

$(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);
                });
            })

如果是作为select组件使用，可以添加form表单和隐藏域(type=”hidden”)，使用jQuery控制向input中写值，或者控制form表单提交。

以上就是利用Css+jQuery 制作下拉菜单的详细内容，更多请关注Gxl网其它相关文章！