jquery美化的苹果风格的下拉框

jquery美化的苹果风格的下拉框。兼容IE6。但是没有做PNG IE6透明度处理，可以参考：完美解决令人头痛的ie6的png透明问题或者使用DD_belatedPNG让IE6支持PNG透明图片
第一步、在head区域引入下面的代码

<style>
body,ul,li,div{margin:0; padding:0;}
body{background:#000;}
.fl{float:left; display:inline;}
.clear{clear:both;}
.pc_overflow{overflow:hidden; _zoom:1;}
.wrap{width:230px; margin:100px auto;}
#your_product{background:url(images/your_product.png); width:230px; height:36px;}
#button{background:url(images/select_slice.png) 0 -68px; border-radius:3px 3px 3px 3px; height:34px;
cursor:pointer; width:200px; margin:20px auto 0 auto;}
#button:hover{background-position:0 -102px;}
.hover{background:url(images/select_slice.png) 0 -102px !important;}
#button span{display:block; height:34px; color:#666; text-shadow:1px 1px 0 #EEE; font-family:Arial,Helvetica, sans-serif; line-height:34px; text-align:center; font-size:12px; background:url(images/select_slice.png) no-repeat 84px -204px;}
#button span:hover{background-position:84px -238px;}
.hoverspan{background:url(images/select_slice.png) no-repeat 84px -238px !important;}
#product_list{width:200px; margin:5px auto 0 auto; height:0px; overflow:hidden;}
#product_list li{background:url(images/dropdown_slice.png) 0 -85px; height:75px; padding-top:10px; padding-left:10px;}
#product_list li span{display:block; background:url(images/dropdown_slice.png) no-repeat 25px -170px;height:75px; cursor:pointer;}
#product_list li span:hover{background-position:25px -255px;}
#product_list li span img{vertical-align:middle;}
#product_list li span h3{font-size:14px; font-weight:normal; color:#fff; font-family:Arial; width:100px;margin-left:10px;}
#product_list li span h3 b{font-weight:normal;}
#product_list li span h3 em{display:block; margin-top:2px; font-size:12px; color:#666;}
</style>
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("#button").toggle(
    function(){
        $(this).stop().addClass("hover").children("span").addClass("hoverspan");
        $("#product_list").animate({height:"340px"},300);
    },
    function(){
        $(this).removeClass("hover").children("span").removeClass("hoverspan");
        $("#product_list").animate({height:"0px"},300);
    }
)
$("#product_list li").click(function(){
        var _text = $(this).children("span").children("h3").children("b").html();
        $("#button").removeClass("hover").children("span").removeClass("hoverspan");
        $("#product_list").animate({height:"0px"},300);
        $("#button span").html(_text);
})
})
</script>

第二步、在html里面引入下面的代码。

<div id="your_product"></div>
<div id="button"><span>Choose Your Product</span></div>
<ul id="product_list">
    <li>
        <span>
            <img class="fl" src="images/iphone.png" />
            <h3 class="fl">
                <b>iPhone 4</b>
                <em>in stock</em>
            </h3>
        </span>
    </li>
    <li>
        <span>
            <img class="fl" src="images/ipod.png" />
            <h3 class="fl">
                <b>iPod</b>
                <em>in stock</em>
            </h3>
        </span>
    </li>
    <li>
        <span>
            <img class="fl" src="images/imac.png" />
            <h3 class="fl">
                <b>MacBook Air</b>
                <em>in stock</em>
            </h3>
        </span>
    </li>
    <li>
        <span>
            <img class="fl" src="images/air.png" />
            <h3 class="fl">
                <b>iMac Station</b>
                <em>in stock</em>
            </h3>
        </span>
    </li>
</ul>