美化的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. }
25. div.bottomTop div.bottomTopRight dl.link ul {
26. position:absolute;
27. right:0px;
28. bottom:19px;
29. display:block;
30. width:90px;
31. background:#999999;
32. }
33. div.bottomTop div.bottomTopRight dl.link ul li {
34. height:22px;
35. line-height:22px;
36. text-align:left;
37. text-indent:18px;
38. }
39. div.bottomTop div.bottomTopRight dl.link ul li a {
40. color:#515151;
41. font-family:宋体;
42. }
    1. 1. jquery代码：
          • <script type="text/javascript">
          • $(function(){
          • $('#link dt').click(function(){
          • $('#link dd').toggle();
          • });
          • })
          • </script>
          1. 要注意一点的是，要实现这个效果，<dd></dd>千万别加高度，