html:

      请选择分类
      

ASP开发
         
.NET开发
         
PHP开发
         
Javascript开发
         
Java特效
      

main.css:

*{ 
    margin:0; 
    padding:0; 
    font-size:14px;
}
ul,li{
    list-style:none;
}
#divselect{
    width:186px; 
    margin:80px auto; 
    position:relative;
    z-index:10000;
}
#divselect cite{
    width:150px; 
    height:24px;
    line-height:24px;
    display:block; 
    color:#807a62; 
    cursor:pointer;
    font-style:normal;
    padding-left:4px;
    padding-right:30px; 
    border:1px solid #333333; 
}
#divselect ul{
    width:184px;
    border:1px solid #333333;
    background-color:#ffffff;
    position:absolute; z-index:20000;
    margin-top:-1px; display:none;
    }
#divselect ul li{
    height:24px; 
    line-height:24px;
}
#divselect ul li a{
    display:block;
    height:24px;
    color:#333333;
    text-decoration:none;
    padding-left:10px; 
    padding-right:10px;
}

main.js

window.onload=function(){
    var box = document.getElementById('divselect'),
        title = box.getElementsByTagName('cite')[0],
        menu = box.getElementsByTagName('ul')[0],
        as = box.getElementsByTagName('a'),
        index = -1; 

    title.onclick=function(event){
      event = event || window.event;
      //显示下拉菜单
      menu.style.display = 'block';
      /*阻止点击事件传播：
          防止点击下拉菜单中的每一项时(ul->li->a),事件逐级传递到document，
          执行了document.onclick  中的 menu.style.display = 'none'语句,
          导致下拉菜单无法显示。*/
      if(event.stopPropagation){
        event.stopPropagation();
      }else{
        event.cancelBubble = true;
      }
      //添加键盘事件
      document.onkeyup = keyEvent;
  }  
    function keyEvent(e){
       e=e || window.event;
       //按了向下键,index递增，当 index>=菜单选项的总数 时,index = 0
       if(e.keyCode== 40){
          index++;
          if(index>=as.length){
            index = 0;
          }
          console.log(index);
          //先清空背景色
          clearBGC();
          //根据index,设置背景色
          as[index].style.background="#ccc";
       }
       //按了向上键，若index