html中css无法控制下拉框select显示的解决办法用div+css来模仿的实例

我们知道，用css控制select元素的时候，各个浏览器显示不一样，所以如果实在是需要做一个丰富多彩的select下拉框，解决办法一般是用div或者其他元素来模仿select，看上去是一个select。

<!--start select-down-box www.uiej.com 2013-5-21-->
<style type="text/css">
.drop-down-box-width{width:200px;/*change if you like*/}
.drop-down-box-hwj{float:left;border:1px solid #ccc;background:#eaeaea;line-height:25px;height:25px;position:relative;font-size:12px;}
.drop-down-box-hwj .drop-down-box-name{overflow:hidden;line-height:25px;height:25px;padding:0 5px;color:#333;font-weight:bold;}
.drop-down-box-hwj .drop-down-triangle{color:#333;border:1px solid #999;line-height:23px;height:23px;width:20px;text-align:center;text-shadow:1px 1px 1px #fff;position:absolute;top:0;right:0;background:#fff;}
.drop-down-box-hwj ul{padding:0;margin:0;position:absolute;left:-1px;top:25px;background:#fff;border:1px solid #ccc;z-index:100;box-shadow:0 0 10px #ccc;height:auto;zoom:1;overflow:hidden}
.drop-down-box-hwj li{padding:0;margin:0;list-style-type:none;display:block;float:left;width:100%;}
.drop-down-box-hwj li a{display:block;text-indent:8px;padding:0 5px;color:#369;text-decoration:none;border:none;}
.drop-down-box-hwj li a:hover{display:block;text-indent:8px;color:#fff;background:#999;text-shadow:0 -1px 0 #666;}
</style>
<div class="drop-down-box-hwj drop-down-box-width" οnmοuseοver="show_control('drop-down-options');" οnmοuseοut="hidden_control('drop-down-options');">
<div class="drop-down-box-name">—— 请选择 ——</div>
<div class="drop-down-triangle">▼</div>
<ul id="drop-down-options" class="drop-down-box-width" style="display:none" οnclick="hidden_control('drop-down-options');">
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容</a></li>
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容</a></li>
</ul>
<script type="text/javascript">
function show_control(obj){var dv=document.getElementById(obj);dv.style.display="block";}
function hidden_control(obj){var dv =document.getElementById(obj);dv.style.display="none";}
</script>
</div>
<!--end select-down-box www.uiej.com 2013-5-21-->

—— 请选择 ——

▼

• 选项内容
• 选项内容
• 选项内容
• 选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容
• 选项内容
• 选项内容