Question

我有一个下拉菜单栏。但无论我设置条形的z-index多高，或者我将内容的z-index设置为-1，它总是落后于我的内容。有人可以帮忙吗？

我确实将z-index设置为500，我将导航顶部菜单悬停，但没有变化。可能是因为我在CSS代码的开头使用了重置代码吗？

这是我的CSS代码：

/*navigation.xhtml; author: Mica */
#navigation {
    float:left;
    width:100%;
    height:18px;    
    margin:15px 0 25px;
}
#navigation ul {
    list-style-type:none;
    list-style-image:none;
    padding:0px;
    float:left;
    width: 100%;
}
#navigation li.topmenu {
    float:left;
    width:170px;
}
.topmenu a {
    float:left;
    width:100%;
    text-align:center;
}
.topmenu ul {
    float:left;
    display:none;
    width:100%;
}
.topmenu a, .submenu a, .topmenu:hover .submenu a {
    padding:3px 0;
    border:1px solid #C27000;
    color:#FFFFFF;
    font-weight:bold;
    text-decoration:none;
    background-color:#FF8C00;
    margin:0;
    font-weight:bold;
}
.submenu a{
    width:100%;
    clear:both;
    postition:absolute;
}
#navigation a:hover, .topmenu.on a, .topmenu:hover a {
    background-color:#FFA500;
}
.topmenu:hover ul {
    display:block;
    z-index:500;
}
#logo a:hover {
    opacity:0.8;
}

/*content in basicTemplate.xhtml; author: Mica */
#content {
    float:left;
    min-height:200px;
    margin:0 7px;
}

Answer 1

哈哈发现了！ z-index仅在首先声明位置时才起作用：所以我需要在此块中设置一个位置：

.topmenu:hover ul {
    display:block;
    z-index:500;
}

喜欢这里：

.topmenu:hover ul {
    display:block;
    position:relative;
    z-index:500;
}

下拉菜单栏的CSS z-index属性

1 个答案: