<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
*{padding:0;margin:0;}
#header{width:180px;border:2px solid #555;height:25px;line-height:25px;margin:0 auto;
padding-left:3px;color:#999;cursor:pointer;margin-top:20px;}
ul{width:183px;margin:0 auto;list-style:none;border:2px solid #555;border-top:none;
display:none;}
li{height:25px;line-height: 25px;padding-left:10px;}
a{color:#000;text-decoration:none;}
</style>
<script type="text/javascript">
var index=-1;
window.onload=function(){
var header=document.getElementById('header'),
lis=document.getElementsByTagName('li');
header.onclick=fndown;
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.background='#ccc';
}
lis[i].onmouseout=function(){
this.style.background='';
}
lis[i].onclick=fnck;
}
}
function fnck(){
header.innerHTML=this.innerHTML;
}
document.onclick=function(){
var uls=document.getElementById('uls');
uls.style.display='none';
}
function fndown(event){
event=event||window.event;
var uls=document.getElementById('uls');
uls.style.display='block';
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
document.onkeyup=function(event){
event=event||window.event;
var lis=document.getElementsByTagName('li'),
header=document.getElementById('header'),
uls=document.getElementById('uls');
for(var i=0;i<lis.length;i++){
lis[i].style.background='';
}
if(uls.style.display=='block'){
switch(event.keyCode){
case 38:
index--;
if(index<0){index=lis.length-1;}
lis[index].style.background='#ccc';
break;
case 40:
index++;
if(index>lis.length-1){index=0;}
lis[index].style.background='#ccc';
break;
case 13:
if(index!=-1){
uls.style.display='none';
header.innerHTML=this.innerHTML;
index=-1;
}
break;
}
}
}
</script>
</head>
<body>
<div>
<div id="header">请选择分类</div>
<ul id="uls">
<li><a href="#">ASP开发</a></li>
<li><a href="#">.NET开发</a></li>
<li><a href="#">PHP开发</a></li>
<li><a href="#">Javascript开发</a></li>
<li><a href="#">Java特效</a></li>
</ul>
</div>
</body>
</html>
header.innerHTML=lis[index].innerHTML;
你这句不应该用this的，因为这个事件是document.onkeyup，所以this应该指的是document对象