css做的菜单下面的一级把上面弹出的二级遮住的问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css做的菜单下面的一级把上面弹出的二级遮住的问题相关的知识，希望对你有一定的参考价值。

从上到下，把z-index的值从小到大从-50到180都设置了，还是不行，请高人帮忙！
<body>

<div id="A0">
<div class=“A1”>
<ul class="lists">
<li class="A2"><a id="A2">一级目录数码家电
<div class="A3">
<div class="A4">
<div class="A5">
<dl id="A6">

<dt class="A7"><a id="A7">二级目2 录1</a></dt>
<dd class="A8"><a id="A8" href="#" title="">三级目录1</a></dd>
<dd class="A9"><a id="A9" href="#" title="">四级目录11</a></dd>

z-index 要和position属性连用才能起效果 lists 的position用relative ，各级目录用absolute定位，再设置z-index 即可 参考技术A 所有元素，设置css样式position为relative;

JS学习笔记： 使用原生JS 实现导航栏下多级分类弹出效果

 

 

 

 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类　　　

代码如下：

　　　　　　　　　　CSS部分: 在原来的目标：hover样式中 增加 .hover状态

li.app_jd a:hover,li.app_jd a.hover{
    background-position: -126px -397px;
}
li.service>a:hover,li.service>a.hover {
    background-image:url(images/jt_up.jpg);
    background-color:#fff;
    border:1px solid #DDD;
    border-bottom-width:0px;
    position:relative;
    z-index:40;
} 
li.app_jd a:hover,li.app_jd a.hover{
    background-position: -126px -397px;
}

　　　　　　　　　　JS部分:在原来的触发事件上 新增了 二级菜单触发onmouseover/out时 设置各自的一级菜单的className 为 “hover”;

window.onload = function(){
    //顶部导航栏弹出
    $("#top_box .app_jd")[0].onmouseover=$("#top_box .service")[0].onmouseover=showItem;
    $("#top_box .app_jd")[0].onmouseout=$("#top_box .service")[0].onmouseout=hideItem;
    //商品主分类栏弹出
    $("#category")[0].onmouseover=showCate;
    $("#category")[0].onmouseout=hideCate;;
    //商品一级分类弹出二级分类
    var lis = $("#cate_box>li");
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover=showSubCate;
        lis[i].onmouseout=hideSubCate;
    }
}
function showItem(){
    this.$("[id$=\'_items\']")[0].style.display="block";
    this.$("a")[0].className="hover";
}
function hideItem(){
    this.$("[id$=\'_items\']")[0].style.display="none";
    this.$("a")[0].className="";
}
function showCate(){
    this.$("#cate_box")[0].style.display="block";
}
function hideCate(){
    this.$("#cate_box")[0].style.display="none";
}
function showSubCate(){
    this.$(".sub_cate_box")[0].style.display="block";
    this.$("h3")[0].className="hover";
}
function hideSubCate(){
    this.$(".sub_cate_box")[0].style.display="none";
    this.$("h3")[0].className="";
}

TIPS：

　　*越是熟悉 HTML/CSS的数据结构，就越可以在JS部分用更“优雅的”代码来执行更多的事情。

　　

 

　　　 

 

以上是关于css做的菜单下面的一级把上面弹出的二级遮住的问题的主要内容，如果未能解决你的问题，请参考以下文章

js怎样让鼠标放到弹出的二级菜单上时不消失呢？

请教个安卓动画效果，就是点击一级菜单动态显示二级菜单的问题？请教大神

css做的菜单，被选中状态的一个效果，很急，希望高手帮忙！！！

html 二级菜单怎么让鼠标移动到二级，三级。。。的时候，一级样式不改变。当移出的时候改变。

JS学习笔记： 使用原生JS 实现导航栏下多级分类弹出效果

关于css二级菜单显示， 看了一个例子， 鼠标放在一级菜单时候， 二级菜单就显示出来了