JavaScript模拟下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
width: 200px;
height: 25px;
background: #f00;
color: #fff;
margin: 20px auto;
cursor: pointer;
}
#box01 {
width: 200px;
height: 135px;
background: #f1f1f1;
margin: 0 auto;
display: none;
}
#box01 li {
width: 200px;
height: 25px;
background: #f00;
color: #fff;
border-bottom: 1px dashed #cecece;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<span>请选择游戏名称</span>
</div>
<div id="box01">
<ul>
<li>地下城与勇士</li>
<li>魔兽世界(国服)</li>
<li>魔兽世界(台服)</li>
<li>热血江湖</li>
<li>大话西游2</li>
<li>QQ幻想世界</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
var aBox = document.getElementById("box01");
var oLi = document.getElementsByTagName("li");
oBox.onclick = function(e) {
aBox.style.display = "block";
var evt = e || event;
if(evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelable = true;
}
for(var i = 0; i < oLi.length; i++) {
oLi[i].onclick = function() {
oBox.innerHTML = this.innerHTML;
aBox.style.display = "none"
oBox.style.background = "#0f0";
}
oLi[i].onmouseover = function() {
this.style.background = "#8b8b8b";
}
oLi[i].onmouseout = function() {
this.style.background = "#f00";
}
}
document.onclick=function(){
aBox.style.display="none";
}
}
}
</script>
</body>
</html>
有任何错误,敬请指教!