美化的select下拉框

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

代码如下：

1. <div class="r">
   
2.                 <dl class="link" id="link">
   
3.                     <dt>友情链接</dt>
   
4.                     <dd>
   
5.                         <ul>
   
6.                             <li><a href="###" target="_blank">友情链接一</a>
   
7. `<a href="###" target="_blank">友情链接二</a>`</li>                        </ul>
   
8.                     </dd>
   
9.                 </dl>
   
10.             </div>

css代码：

1. div.bottomTop div.bottomTopRight dl.link {
   
2.     margin-right:0px;
   
3.     display:inline-block;
   
4.     border:1px solid #484848;
   
5.     margin-left:15px;
   
6.     font-size:12px;
   
7.     margin-top:15px;
   
8.     width:90px;
   
9.     height:18px;
   
10. }
    
11. div.bottomTop div.bottomTopRight dl.link dt {
    
12.     background:url(../images/select_bg.gif) no-repeat 7px center;
    
13.     color:#515151;
    
14.     text-indent:18px;
    
15.     height:18px;
    
16.     line-height:18px;
    
17.     width:90px;
    
18.     cursor:pointer;
    
19.     font-family:宋体;
    
20. }
    
21. div.bottomTop div.bottomTopRight dl.link dd {
    
22.     display:none;
    
23.     position:relative;
    
24. }
    
28. div.bottomTop div.bottomTopRight dl.link ul {
    
29.     position:absolute;
    
30.     right:0px;
    
31.     bottom:19px;
    
32.     display:block;
    
33.     width:90px;
    
34.     background:#999999;
    
35. }
    
36. div.bottomTop div.bottomTopRight dl.link ul li {
    
37.     height:22px;
    
38.     line-height:22px;
    
39.     text-align:left;
    
40.     text-indent:18px;
    
41. }
    
42. div.bottomTop div.bottomTopRight dl.link ul li a {
    
43.     color:#515151;
    
44.     font-family:宋体;
    
45. }
    1. 1. jquery代码：
          • <script type="text/javascript">
            
          • $(function(){
            
          •     $('#link dt').click(function(){
            
          •         $('#link dd').toggle();
            
          •     });
            
          • })
            
          • </script>

           

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