<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>下拉列表</title>
</head>
<style>
*{margin:0 auto; padding:0px; text-align:center;}
ul,li{list-style:none;}
.div2{ position:relative; background:#ccc;width: 200px;height: 30px;line-height:30px;}
#showul{color: white;width: 2px;height: 2px;right:26px; position:absolute;}
ul li { background:#eee;width: 200px;height: 30px; line-height:30px;}
ul li:hover {color: #fff; background:#71adaa; }
</style>
<body>
<div class="div2">
<span class="content">My box </span><span id="showul" >▼</span>
</div>
<ul id="testul" style="display:none">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</body>
<script>
var show= document.querySelector(".div2"),
showul=document.querySelector("#showul"),
content=document.querySelector(".content"),
testul = document.querySelector("#testul");
show.addEventListener('click', function(e) {
switch (testul.style.display) {
case 'block':
showul.innerHTML = "▼";
testul.style.display = 'none';
break;
case 'none':
showul.innerHTML = "▲";
testul.style.display = 'block';
break;
}
}, false);
testul.addEventListener('click', function(e) {
showul.innerHTML = "▼";
testul.style.display = 'none';
content.innerHTML = e.target.innerHTML;
}, false);
</script>
</html>