<title>模拟select控件</title>
<style>
html,body{height:100%overflow:hidden}
body,div,form,h2,ul,li{margin:0padding:0}
ul{list-style-type:none}
body{background:#23384efont:12px/1.5 \5fae\8f6f\96c5\9ed1}
#search,#search form,#search .box,#search .select,#search a{background:url(http://www.codefans.net/jscss/demoimg/201206/search.jpg) no-repeat}
#search,#search .box,#search form{height:34px}
#search{position:relativewidth:350pxmargin:10px auto}
#search .box{background-position:right 0}
#search form{background-repeat:repeat-xbackground-position:0 -34pxmargin:0 20px 0 40px}
#search .select{float:leftcolor:#fffwidth:190pxheight:22pxcursor:pointermargin-top:4pxline-height:22pxpadding-left:10pxbackground-position:0 -68px}
#search a{float:leftwidth:80pxheight:24pxcolor:#333letter-spacing:4pxline-height:22pxtext-align:centertext-decoration:nonebackground-position:0 -90pxmargin:4px 0 0 10px}
#search a:hover{color:#f60background-position:-80px -90px}
#search .sub{position:absolutetop:26pxleft:40pxcolor:#fffwidth:198pxbackground:#2b2b2bborder:1px solid #fffdisplay:none}
#search .sub li{height:25pxline-height:24pxcursor:pointerpadding-left:10pxmargin-bottom:-1pxborder-bottom:1px dotted #fff}
#search .sub li.hover{background:#8b8b8b}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oSelect = document.getElementsByTagName("span")[0]
var oSub = document.getElementsByTagName("ul")[0]
var aLi = oSub.getElementsByTagName("li")
var i = 0
oSelect.onclick = function (event)
{
var style = oSub.style
style.display = style.display == "block" ? "none" : "block"
//阻止事件冒泡
(event || window.event).cancelBubble = true
}
for (i = 0i <aLi.lengthi++)
{
//鼠标划过
aLi[i].onmouseover = function ()
{
this.className = "hover"
}
//鼠标离开
aLi[i].onmouseout = function ()
{
this.className = ""
}
//鼠标点击
aLi[i].onclick = function ()
{
oSelect.innerHTML = this.innerHTML
}
}
document.onclick = function ()
{
oSub.style.display = "none"
}
}
</script>
</head>
<body>
<div id="search">
<div class="box">
<form>
<span class="select">请选择游戏名称</span>
<a href="javascript:">搜索</a>
</form>
</div>
<ul class="sub">
<li>地下城与勇士</li>
<li>魔兽世界（国服）</li>
<li>魔兽世界（台服）</li>
<li>热血江湖</li>
<li>大话西游II</li>
<li>QQ幻想世界</li>
</ul>
</div>
css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:<html>
<head>
<style>
.div1{
width:600px
height:200px
font-size:13px
}
.div select{
width:200px
}
.div select option{
width:150px
height:30px
}
</head>
<body>
<div class='div1'>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>
