小伙伴们，根据所学知识，实现下图所示的菜单效果，实现点击菜单中的向下三角展开菜单，点击页面空白处收起菜单，按下键盘上的向上、向下方向键可以选中对应的选项，鼠标点击或按下回车键将当前高亮的选项内容设为菜单的标题
效果图:
初始：
点击三角：
点击选中项：
提示: 1、 声明一个全局的index变量初值为-1 2、 按下向下方向键时index递增，当递增至大于等于菜单选项的总数时恢复为0 3、 按下向上方向键时判断index，如若小于等于0则设为菜单选项的总数，之后递减index 4、 根据index值将对应的选项设为当前（灰色背景） 5、 按下回车键时将对应选中的选项设为菜单标题，且将所有选项设为无背景，index恢复为-1，菜单收起
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单</title> 6 <style type="text/css"> 7 body,ul,li{ margin:0; padding:0; font-size:13px;} 8 ul,li{list-style:none;} 9 #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;} 10 #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; 11 padding-left:4px; padding-right:30px; border:1px solid #333333; 12 /*background:url(xjt.png) no-repeat right center;*/} 13 #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;} 14 #divselect ul li{height:24px; line-height:24px;} 15 #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} 16 </style> 17 <script type="text/javascript"> 18 window.onload=function(){ 19 var box=document.getElementById(‘divselect‘), 20 title=box.getElementsByTagName(‘cite‘)[0], 21 menu=box.getElementsByTagName(‘ul‘)[0], 22 as=box.getElementsByTagName(‘a‘), 23 index=-1; 24 25 // 点击三角时 26 title.onclick=function(event){ 27 event = event||window.event; 28 menu.style.display = ‘block‘; 29 if(event.stopPropagation){ 30 event.stopPropagation(); 31 }else{ 32 event.cancelBubble = true; 33 } 34 document.onkeyup = function(event){ 35 event = event||window.event; 36 if(event.keyCode==40){ 37 index++; 38 if(index>=as.length) index=0; 39 for(var i=0; i<as.length;i++){ 40 as[i].style.background = ‘#fff‘; 41 } 42 as[index].style.background = ‘#ccc‘; 43 } 44 if(event.keyCode==38){ 45 index--; 46 if(index<0) index=as.length-1; 47 for(var i=0; i<as.length;i++){ 48 as[i].style.background = ‘#fff‘; 49 } 50 as[index].style.background = ‘#ccc‘; 51 } 52 if(event.keyCode==13){ 53 for(var i=0; i<as.length;i++){ 54 as[i].style.background = ‘#fff‘; 55 } 56 title.innerHTML = as[index].innerHTML; 57 menu.style.display = ‘none‘; 58 } 59 } 60 } 61 62 // 滑过滑过、离开、点击每个选项时 63 for(var i=0;i<as.length;i++){ 64 as[i].num=i; 65 as[i].onmouseover=function(){ 66 this.style.background="#ccc"; 67 index=as[i].num-1; 68 } 69 as[i].onmouseout = function(){ 70 this.style.background = ‘#fff‘ 71 } 72 as[i].onclick = function(event){ 73 event = event||window.event; 74 if(event.stopPropagation){ 75 event.stopPropagation(); 76 }else{ 77 event.cancelBubble = true; 78 } 79 menu.style.display = ‘none‘; 80 title.innerHTML = this.innerHTML; 81 } 82 } 83 // 点击页面空白处时 84 document.onclick = function(){ 85 menu.style.display = ‘none‘; 86 } 87 } 88 </script> 89 </head> 90 <body> 91 <div id="divselect"> 92 <cite>请选择分类</cite> 93 <ul> 94 <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li> 95 <li><a href="javascript:;" selectid="2">.NET开发</a></li> 96 <li><a href="javascript:;" selectid="3">PHP开发</a></li> 97 <li><a href="javascript:;" selectid="4">Javascript开发</a></li> 98 <li><a href="javascript:;" selectid="5">Java特效</a></li> 99 </ul> 100 </div> 101 </body> 102 </html>
原文：http://www.cnblogs.com/Lwei/p/5225532.html