0

我有一个有问题的 jquery 下拉菜单。我想用我的子菜单重叠我的主菜单，基本上图像是主菜单。！

链接到实际场景重叠失败

这是CSS代码` 

/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
    float:left;
    display:block;
    width:100px; 
    background:#fff; 
    position:relative;
    margin:0 1px;
    z-index:1;

}

/* this is the parent menu */
#nav li a {
    /*display:block;*/ 
    padding:8px 5px 0 5px; 
    font-weight:700;  
    height:23px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#333;
    z-index:-1;

   }

#nav li a:hover {
    color:#ccc;
}

/* you can make a different style for default selected value */
#nav a.selected {
    color:#f00;
}

    /* submenu, it's hidden by default */
    #nav ul {
        position:absolute; 
        left:0;
        top:0; 
        display:none; 
        margin:0 0 0 -1px; 
        padding:0; 
        list-style:none;
        z-index:1;
      }

    #nav ul li {
        width:100px; 
        float:left; 
        border-top:1px solid #fff;
    }

    /* display block will make the link fill the whole area of LI */
    #nav ul a {
        display:block;  
        height:15px;
        padding: 8px 5px; 
        color:#666;
    }

    #nav ul a:hover {
        text-decoration:underline;  
    }
     #nav a {
         display:block; color:#000; text-decoration:none;
    } 
     #nav ul li a {
         display:block; padding:3px 7px 5px; background-color:#ccc; color:#333;
    }
       #nav ul li a:hover {
         background-color:#ccc; text-decoration:underline; color: white;
    }
       #nav ul ul {
          left:102px; top:-1px; display:none; position:absolute; z-index: 9998;
    }

   /* fix ie6 small issue */
   /* we should always avoid using hack like this */
   /* should put it into separate file : ) */
    *html #nav ul {
       margin:0 0 0 -2px;
          }

`

<script type="text/javascript">
$(document).ready(function () { 

    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);

        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );

});
</script>

我认为这里需要的是如何通过子菜单重叠另一个“li”希望你能在这里帮助我。多谢

4

1 回答 1

0

如果要z-index为选择器设置值，则position也必须是absolute或relative。在这里，您正在设置z-index: -1但没有position设置值（除非它以某种方式在其他地方被继承）。 

/* this is the parent menu */
#nav li a {
    /*display:block;*/ 
    padding:8px 5px 0 5px; 
    font-weight:700;  
    height:23px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#333;
    z-index:-1;
}
于 2012-06-21T14:21:37.240 回答