html
<div id="city">
<p class="title">查找新世界城市活动信息</p>
<p>每个城市的有不同的活动信息,请自主查询您所需要了解的城市</p>
<form action="" method="post">
<div class="country">
<ul>
<li class="active">中国</li>
<li>美国</li>
<li>英国</li>
<li>法国</li>
</ul>
</div>
<div class="status">
<ul>
<li class="active">省份</li>
<li>北京</li>
<li>广东</li>
<li>贵州</li>
</ul>
</div>
<div class="city">
<ul>
<li class="active">城市</li>
<li>杭州</li>
<li>苏州</li>
<li>兰州</li>
</ul>
</div>
<input type="submit" value="搜   索"/>
</form>
</div>
css
#city{ height: 340px; background: url(../img/img_30.png) no-repeat top left; padding-top: 52px; } #city .title{ font-size: 21px; opacity: 1; -line-height: 40px; } #city .title:after{ content: "——"; display: block; -line-height: 40px; } #city p{ color: #FFFFFF; font-family: "microsoft yahei"; text-align: center; opacity: 0.8; } #city form{ width: 100%; height: 168px; margin-top: 52px; padding: 0 0 0 126px; } #city form div, #city form input{ width: 236px; height: 34px; float: left; } #city form div{ margin-right: 28px; border: none; color: #a8aaaa; font-size: 12px; background-color: #FFFFFF; } #city form div:hover{ border: 1px solid #E74F4D; } #city form ul li{ width: 236px; height: 34px; line-height: 34px; font-size: 12px; color: #323333; opacity: 0.7; display: none; background-color: #e3e3e5; text-indent: 12px; font-size: 12px; color: #323333; } #city form ul li.active{ display: block; background: url(../img/images/task_1_7_1_03.png) no-repeat; background-position: 95% 50%; opacity: 1; background-color: white; } #city form ul li:hover{ background-color: #E74F4D; color: #FFFFFF; } #city form input{ background-color: #E74F4D; border: none; font-size: 14px; color: white; font-family: "microsoft yahei"; }
框架样式如下

比默认的样式好看吧?
为了完全实现select的效果,需要用到jq+事件委托:
jq
$(document).ready(function(){ var oCityDiv = $("#city").find("div"); oCityDiv.mouseover(function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; var _this = $(this);//养成良好习惯,区分this的对象 if(target.nodeName.toLowerCase() == ‘li‘){ _this.find(‘li‘).css(‘display‘,‘block‘); _this.find(‘li‘).click(function(){ var _li = $(this); var iCur = _li.text(); _this.find(‘.active‘).text(iCur); }); } _this.mouseout(function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == ‘li‘){ _this.find(‘li‘).not(‘.active‘).css(‘display‘,‘none‘); } }); }); });
修改option的宽高无效,用div+ul做select下拉菜单
原文:http://www.cnblogs.com/finn-Reo/p/5901118.html