开箱即用：div模拟select并美化

通常我们做友情链接都是用默认的，但各浏览器的风格都不一样，而且css还不能做成各浏览器一致的效果，所以对于要求高的客户，或者输出人员自己也受不了的时候，还是自己用div模拟一个吧。

效果：

html：

<!-- 友情链接 -->  
<section class="friendLinks clearfix"> 
    <dl>
        <dt><i></i>
            <h3>友情链接1</h3>
        </dt>
        <dd>
            <ul>
                <li><a href="#" target="_blank">腾讯网</a></li>
                <li><a href="#" target="_blank">腾讯网</a></li>
                <li><a href="#" target="_blank">腾讯网</a></li>
                <li><a href="#" target="_blank">腾讯网</a></li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt><i></i>
            <h3>友情链接2</h3>
        </dt>
        <dd>
            <ul>
                <li><a href="#" target="_blank">新浪网</a></li>
                <li><a href="#" target="_blank">新浪网</a></li>
                <li><a href="#" target="_blank">新浪网</a></li>
                <li><a href="#" target="_blank">新浪网</a></li>
            </ul>
        </dd>
    </dl>
</section>
<script> 
    //友情链接模拟下拉式 
    $(".friendLinks dl").hover( function(){},function(){ $(this).removeClass("on") }) 
    $(".friendLinks dt").click(function(){ 
        $(this).parent().toggleClass("on").siblings().removeClass("on"); 
    }); 
    $(".friendLinks li").click(function(){ 
        window.open( $(this).attr("url") ) 
    }); 
</script> 

/* 友情链接模拟下拉 */ 
.friendLinks dl{width: 222px;margin-right: 15px;float:left;display:inline;position:relative;} 
.friendLinks dl dt{height: 34px;line-height: 34px;padding:0 5px 0 8px;overflow:hidden;border:1px solid #ccc;background:#fff;position:relative;cursor:pointer;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;} 
.friendLinks dl dt i{ right:12px; top:50%; margin-top:-2px; border-width:5px; position:absolute;  border-color:transparent; border-style:dashed;  border-top-color:#363636;border-top-style:solid; content:"";display:block; font-size:0;line-height:0;width:0;} 
.friendLinks dl dt h3{border-right:1px solid #ccc; width:175px} 
.friendLinks dd{bottom: 35px;display:none;width:100%;position:absolute;left:0;} 
.friendLinks ul{ max-height: 389px; border:1px solid #ccc; background:#fff;overflow-y:scroll; } 
.friendLinks li{line-height:22px; padding: 8px 10px;border-bottom:1px dotted #ccc;word-break:keep-all;white-space:nowrap;cursor:pointer;} 
.friendLinks li:hover{  color:#CD3333; background-color:#f1f1f1 } 
.friendLinks .last{border-bottom:0} 
.friendLinks .on {z-index:9; -webkit-box-shadow:0 0 3px rgba(0, 0, 0, .3); -moz-box-shadow:0 0 3px rgba(0, 0, 0, .3); box-shadow:0 0 5px rgba(0, 0, 0, .2);  } 
.friendLinks .on dt{border-color:#bbb; } 
.friendLinks .on dt i{  border-top-style:none; border-bottom-color:#aaa;border-bottom-style:solid; } 
.friendLinks .on dd{ display:block;  -webkit-box-shadow:0 0 3px rgba(0, 0, 0, .3); -moz-box-shadow:0 0 3px rgba(0, 0, 0, .3); box-shadow:0 0 5px rgba(0, 0, 0, .2); }