引用Jquery文件。
<script>
var bottombgcolor = ’#999966’; //鼠标移动到下拉菜单后的背景颜色
function showbgcolor(obj) {
obj.style.backgroundColor = bottombgcolor;
}
function hiddenbgcolor(obj) {
obj.style.backgroundColor = ’’;
}
function showselectbottom() {
$(’#selectbottom’).show();
}
function selected(obj) {
$(’#select_txt_top’).val(obj.value);
$(’#selectbottom’).hide();
}
</script>
<style>
.select_txt_top{width:100px; height:18px; border:#999999 solid 1px; line-height:18px; float:left; color:#999999; cursor:default;}
.select_but_top{width:24px; border-left:0px; text-align:center; background-color:#CCCCCC;}
.select_txt_center{width:125px;*width:127px; height:18px; border:0px; border-left:#999999 solid 1px;border-right:#999999 solid 1px;line-height:18px; color:#000000;cursor:default; display:block; *margin-top:-2px;}
.select_txt_bottom{border-bottom:#999999 solid 1px;}
.centerbg{background-color:#996633;}
</style>
<span style="float:left"> 位置:</span>
<div style="float:left;z-index:8;">
<input value="请选择城市" class="select_txt_top" type="text" readonly="readonly" id="select_txt_top" onclick="showselectbottom()" /><input name="" type="text" class="select_txt_top select_but_top" value="↓" readonly="readonly" id="select_but_top" onclick="showselectbottom();"/>
<div style="clear:both;display:none;z-index:8" id="selectbottom">
<input value="上海市" class="select_txt_center" type="text" readonly="readonly" onmouseover="showbgcolor(this);" onmouseout="hiddenbgcolor(this);" onclick="selected(this);"/>
<input value="北京市" class="select_txt_center" type="text" readonly="readonly" onmouseover="showbgcolor(this);" onmouseout="hiddenbgcolor(this);" onclick="selected(this);"/>
<input value="广东省" class="select_txt_center" type="text" readonly="readonly" onmouseover="showbgcolor(this);" onmouseout="hiddenbgcolor(this);" onclick="selected(this);"/>
<input value="海南省" class="select_txt_center" type="text" readonly="readonly" onmouseover="showbgcolor(this);" onmouseout="hiddenbgcolor(this);" onclick="selected(this);"/>
<input value="江苏省" class="select_txt_center" type="text" readonly="readonly" onmouseover="showbgcolor(this);" onmouseout="hiddenbgcolor(this);" onclick="selected(this);"/>
<input value="浙江省" class="select_txt_center select_txt_bottom" type="text" readonly="readonly" onmouseover="showbgcolor(this);" onmouseout="hiddenbgcolor(this);" onclick="selected(this);"/>
</div>
</div>
-----------------------------------------------方法二
<style>
.select{width: 100px;height: 24px;background: none;border: none;margin:-2px;}
#sleHid{display: block;width: 76px;overflow: hidden;}
#sleBG{width: 98px;height: 24px;border: #61AC36 1px solid;background: url("/Images/Button/selArr.jpg") #fff no-repeat 82px 1px;display: block;}
</style>
<span style="float:left"> 位置:</span>
<span id="sleBG" style="float:left"><span id="sleHid">
<select id="areacode" class="select">
<option selected="selected">所有分类</option>
<option value="1">图书</option>
<option value="2">音像</option>
</select>
</span></span>