简易自定义下拉菜单 与简易默认下拉html片段

简易自定义下拉选择 html片段

html：

<div class="select_box province">
<div class="selected">T时代C5</div>
<div class="select_list_box" style="display:none;">
<div class="select_list">T时代C5</div>
<div class="select_list">T时代C5</div>
<div class="select_list">T时代C5</div>
<div class="select_list">T时代C5</div>
<div class="select_list">T时代C5</div>
</div>
</div>

css:

 

.select_box{width:208px;height:26px;position:absolute;left:424px;top:80px;cursor:pointer;z-index:6;}
.select_box .selected{width:208px;height:26px;line-height:26px;font-size:15px;text-indent:18px;}
.select_list_box{width:208px;/*height:150px;*//*overflow:hidden;overflow-y:scroll;*/background:#FFF;}
.select_list_box .select_list{width:208px;height:26px;font-size:15px;line-height:26px;text-indent:18px;border-top:1px solid #f5f5f5;}
.select_list_box .select_list:hover{background:#c9c9c9;}

.province{top:205px;z-index:5;}

 

系统默认下拉

html

<div class="select_box">
<select name="listZhiwei1" size="1"></select>
<select name="listZhiwei2" size="1"></select>
<select name="listZhiwei3" size="1"></select>
</div>

 

css

.select_box { width: 490px; position: relative; z-index: 2; }

.select_box select { width: 151px; height: 55px; margin-right: 8px; }