Tab键可访问的下拉菜单demo

<ul id="navigationRegion">
    <li token="1" class="index_on"><a title="首页" href="//www.mtime.com/">首页</a></li>
    <li token="2" class="home">
        <a title="我的时光" href="//my.mtime.com">我的时光</a>
        <span>&nbsp;</span>
        <div style="overflow:hidden; height:226px;" class="i_n_l child">
            <h5><a href="//my.mtime.com"><em class="mytime"></em>我的时光</a></h5>
            <h5><a href="//my.mtime.com/movie/wish/">我的电影</a></h5>
            <h5><a href="//my.mtime.com/friend/">我的好友</a></h5>
            <h5><a href="//my.mtime.com/group/">我的群组</a></h5>
            <h5><a href="//www.mtime.com/member/signin/"><em class="myblog"></em>我的博客</a></h5>
            <h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyBlog">日志</a></h5>
            <h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyPhoto">相册</a></h5>
            <h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyProfile">个人资料</a></h5>
        </div>
    </li>
    <li token="3" class="movie">
        <a title="电影" href="//www.mtime.com/movie/">电影</a>
        <span>&nbsp;</span>
        <div style="overflow: hidden; height: 226px;" class="i_n_l ">
            <h5><a href="//www.mtime.com/movie/">电影频道</a></h5>
            <h5><a href="//www.mtime.com/movie/news/">新闻</a></h5>
            <h5><a href="//www.mtime.com/movie/new/">新片</a></h5>
            <h5><a href="//www.mtime.com/movie/nowplaying/">热映</a></h5>
            <h5><a href="//www.mtime.com/movie/top_ten/">排行榜</a></h5>
            <h5><a href="//www.mtime.com/comment/">影评</a></h5>
            <h5><a href="//www.mtime.com/movie/special.html">专题</a></h5>
            <h5><a href="//www.mtime.com/movie/section/">电影查询</a></h5>
        </div>
    </li>
    <li token="11" class="tv">
        <a title="电视" href="//www.mtime.com/tv/">电视</a>
        <span>&nbsp;</span>
        <div style="overflow: hidden; height: 145px;" class="i_n_l">
            <h5><a href="//www.mtime.com/tv/">电视频道</a></h5>
            <h5><a href="//www.mtime.com/tv/news/">新闻</a></h5>
            <h5><a href="//www.mtime.com/tv/hot/">热播</a></h5>
            <h5><a href="//www.mtime.com/tv/top/">排行榜</a></h5>
            <h5><a href="//www.mtime.com/tv/section/">电视剧查询</a></h5>
        </div>
    </li>
    <li token="4" class="person">
        <a title="人物" href="//www.mtime.com/people/">人物</a>
        <span>&nbsp;</span>
        <div style="overflow: hidden; height: 145px;" class="i_n_l">
            <h5><a href="//www.mtime.com/people/">人物频道</a></h5>
            <h5><a href="//www.mtime.com/people/news/">新闻</a></h5>
            <h5><a href="//www.mtime.com/people/gossip/">八卦</a></h5>
            <h5><a href="//www.mtime.com/people/interview/">人物访谈</a></h5>
            <h5><a href="//www.mtime.com/people/top_ten/">排行榜</a></h5>
        </div>
    </li>
    <li token="5" class="video"> <a title="视频" href="//www.mtime.com/video/">视频</a>  </li>
    <li token="6" class="photo"> <a title="图片" href="//www.mtime.com/picture/">图片</a>  </li>
    <li token="7" class="blog">
        <a title="博客" href="//i.mtime.com/">博客</a>
        <span>&nbsp;</span>
        <div style="overflow: hidden; height: 199px;" class="i_n_l">
            <h5><a href="//i.mtime.com">博客频道</a></h5>
            <h5><a href="//i.mtime.com/movietalk.html">电影电视</a></h5>
            <h5><a href="//i.mtime.com/buzz.html">明星时尚</a></h5>
            <h5><a href="//i.mtime.com/lifestyle.html">文化生活</a></h5>
            <h5><a href="//i.mtime.com/photo/">相册</a></h5>
            <h5><a href="//i.mtime.com/member.html">会员</a></h5>
            <h5><a href="//i.mtime.com/blog_hot/">热门日志</a></h5>
        </div>
    </li>
    <li token="8" class="group">
        <a title="群组" href="//group.mtime.com/">群组</a>
        <span>&nbsp;</span>
        <div style="overflow: hidden; height: 199px;" class="i_n_l">
            <h5><a href="//group.mtime.com">群组频道</a></h5>
            <h5><a href="//www.mtime.com/member/signin/?redirectUrl=MyGroup">我的群组</a></h5>
            <h5><a href="//www.mtime.com/member/signin/?redirectUrl=/city/">我的同城</a></h5>
            <h5><a href="//group.mtime.com/event/">活动</a></h5>
            <h5><a href="//group.mtime.com/topic_hot/">热门话题</a></h5>
            <h5><a href="//group.mtime.com/class/">群组分类</a></h5>
            <h5><a href="//group.mtime.com/top/">群组人气榜</a></h5>
        </div>
    </li>
    <li token="9" class="quiz">
        <a title="游戏" href="//www.mtime.com/fun/">游戏</a>
        <span>&nbsp;</span>
        <div style="overflow: hidden; height: 145px;" class="i_n_l">
            <h5><a href="//www.mtime.com/fun/">游戏频道</a></h5>
            <h5><a href="//www.mtime.com/fun/quiz/">电影猜猜猜</a></h5>
            <h5><a href="//www.mtime.com/fun/photo/">图片评分</a></h5>
            <h5><a href="//my.mtime.com/app/memory/">眼疾手快</a></h5>
            <h5><a href="//my.mtime.com/app/card/">卡片大富翁</a></h5>
        </div>
    </li>
    <li token="10" class="showtime">
        <a title="电影院" href="//theater.mtime.com/">电影院</a>
        <span>&nbsp;</span>
        <div style="overflow: hidden; height: 145px;" class="i_n_l">
            <h5><a href="//theater.mtime.com/">电影院频道</a></h5>
            <h5><a href="//theater.mtime.com/showtime/">影讯</a></h5>
            <h5><a href="//theater.mtime.com/movie/">新片</a></h5>
            <h5><a href="//theater.mtime.com/cinema/">影院</a></h5>
            <h5><a href="//theater.mtime.com/discount/">优惠</a></h5>
        </div>
    </li>
</ul>

<script>
    var o = document.getElementById("navigationRegion").getElementsByTagName("li");
    var l = o.length, cache;

    var menuTaga = function(obj){
        //获取a标签DOM对象
        return obj.getElementsByTagName("a")[0];
    }, menuDown = function(obj){
        var cl = obj.className;
        if(/_on$/.test(cl) || /_hover$/.test(cl)){
            return;
        }
        obj.className = obj.className + "_hover";
    }, menuUp = function(obj){
        obj.className = obj.className.replace("_hover", "");
    }, menuCache = function(obj){
        if(cache){
            menuUp(cache);
        }
        cache = obj;
    }, menuEvent = function(obj){
        obj.onmouseover = function(){
            menuCache(this);
            return menuDown(this);
        };
        obj.onmouseout = function(){
            return menuUp(this);
        };
        menuTaga(obj).onfocus = function(){
            menuCache(obj);
            return menuDown(obj);
        };
    };
    for(var i=0; i<l; i+=1){
        menuEvent(o[i]);
    }
</script>