此导航下拉的每个下拉内容都已经通过CSS定位好了，但是，考虑到加载的原因，其下拉内容默认是未装载的。也就是说，是鼠标移至导航内容上，才动态load下拉div并嵌入导航li标签内的，如下图所示：

当然，作为静态demo页面，没有必要动态load下拉内容，所以，demo页面的下拉div默认就是隐藏且装载好的，于是，我们就可以通过简单的class切换实现下拉效果。
首先是HTML结构，见下图：

核心CSS代码如下：

.i_n_l{display:none;}
.showtime_hover .i_n_l,.quiz_hover .i_n_l,.home_hover .i_n_l,
.movie_hover .i_n_l,.tv_hover .i_n_l,
.person_hover
.i_n_l,.blog_hover .i_n_l,.group_hover .i_n_l{display:block;}

可见，我们只要让li标签的class，例如“我的时光”所在li标签，由”home”变成”home_hover”就可以控制下拉菜单的显示与隐藏了，很简单吧，所以，相应的js代表就会类似于下面：

<script>
    var o = document.getElementById("navigationRegion").getElementsByTagName("li");
    var l = o.length;
    for(var i=0; i<l; i+=1){
        o[i].onmouseover = function(i){
            var cl = o[i].className;
            if(/_on$/.test(cl) || /_hover$/.test(cl)){
                  return;
            }
            o[i].className = cl + "_hover";
        }(i);
        o[i].onmouseout = function(i){
            return function(){
                o[i].className = o[i].className.replace("_hover", "");
            }
        }(i);
    }
</script>

出处：zhangxinxu
责任编辑：bluehearts

上一页 js下拉菜单实现与可访问性的思考 [1] 下一页 js下拉菜单实现与可访问性的思考 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。