美化的select下拉框

ie7浏览器以后的下拉框，给他加上边框样式，是没用的。要是想做出样式好看的下拉框需要用js或者jquery来模拟实现。

代码如下：

<div class="r">

<dl class="link" id="link">

<dt>友情链接</dt>

<dd>

<ul>

<li><a href="###" target="_blank">友情链接一</a>

`<a href="###" target="_blank">友情链接二</a>`</li> </ul>

</dd>

</dl>

</div>

css代码：

div.bottomTop div.bottomTopRight dl.link {

margin-right:0px;

display:inline-block;

border:1px solid #484848;

margin-left:15px;

font-size:12px;

margin-top:15px;

width:90px;

height:18px;

}

div.bottomTop div.bottomTopRight dl.link dt {

background:url(../images/select_bg.gif) no-repeat 7px center;

color:#515151;

text-indent:18px;

height:18px;

line-height:18px;

width:90px;

cursor:pointer;

font-family:宋体;

}

div.bottomTop div.bottomTopRight dl.link dd {

display:none;

position:relative;

}

div.bottomTop div.bottomTopRight dl.link ul {

position:absolute;

right:0px;

bottom:19px;

display:block;

width:90px;

background:#999999;

}

div.bottomTop div.bottomTopRight dl.link ul li {

height:22px;

line-height:22px;

text-align:left;

text-indent:18px;

}

div.bottomTop div.bottomTopRight dl.link ul li a {

color:#515151;

font-family:宋体;

}

jquery代码：

<script type="text/javascript">

$(function(){

$('#link dt').click(function(){

$('#link dd').toggle();

});

})

</script>

要注意一点的是，要实现这个效果，<dd></dd>千万别加高度，