css配合js模拟的select下拉框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
a{text-decoration:none;}
.selectBox{width:300px; height:30px; position:relative; border:#09F solid 1px; margin:100px auto;}
.select_txt{width:100%; height:30px; font:14px/30px "Microsoft YaHei"; position:relative;}
.txt{padding:0 10px; font-size:14px; font-weight:normal;}
.sj{border-width:6px; border-color:#09F #FFFFFF #FFFFFF #FFFFFF; border-style:solid dashed dashed dashed; position:absolute; right:10px; top:12px; cursor:pointer;}
.select{border:#09F solid 1px; overflow:hidden; width:300px; position:absolute; left:-1px; top:30px; display:none;}
.select a{display:block; padding:0 10px; font:14px/2 "Microsoft YaHei";}
.select a:hover{background:#09F; color:#FFF;}
</style>
</head> <body>
<div class="selectBox">
<div class="select_txt">
<h3 class="txt" id="txt">文字部分</h3>
<span class="sj" id="sj"></span>
</div>
<div class="select" id="select">
<a href="javascript:;">首页</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">联系我们</a>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">联系我们</a>
<a href="javascript:;">联系我们</a>
<a href="javascript:;">联系我们</a>
<a href="javascript:;">联系我们</a>
</div>
</div>
<script>
(function(){
var oTxt = document.getElementById('txt');
var oSj = document.getElementById('sj');
var oSelect = document.getElementById('select');
var aA = oSelect.getElementsByTagName('a'); oSj.onclick = function(ev)
{
var oEvent = ev || event;
oSelect.style.display = 'block'; for(var i=0;i<aA.length;i++)
{
aA[i].onclick = function(ev)
{
var oEvent = ev || event;
oTxt.innerHTML = this.innerHTML;
} } oEvent.cancelBubble = true;
}
document.onclick = function(){oSelect.style.display = 'none';} })()
</script>
</body>
</html>