Question

菜单栏是一个超级鱼3层菜单。菜单栏的css代码为： -

 /*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin:         0;
    padding:        0;
    list-style:     none;
}
.sf-menu {line-height:  1.0;}
.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          11em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {width:100%;}
.sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {
    float:          left;
    z-index:        9999;     #######Edited the Z-index here##########
    position:       relative;
}
.sf-menu a {display:block;position: relative;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:           0;
    top:            2.5em; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {left:11em; /* match ul width */top:0;}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */top: 0;}

/*** DEMO SKIN ***/
.sf-menu {float:left;margin-bottom: 1em;}
.sf-menu ul {box-shadow: 2px 2px 6px rgba(0,0,0,.2);}
.sf-menu a {
    border-left:    1px solid #fff;
    border-top:     1px solid #CFDEFF;
    padding:        .75em 1em;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:          #13a;
}
.sf-menu li {background:#BDD2FF;}
.sf-menu li li {background:#AABDE6;}
.sf-menu li li li {background:#9AAEDB;}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:     #CFDEFF;
    outline:        0;
}

选择框的Html代码为： -

<select name="designation" id="designation" class=forCombobox>
<option value="">--Select--</option>
</select>

forCombobox的CSS： -

    .forCombobox
{
    font-family: Verdana;
    font-size: 11px;
    color: #000000;
    z-index:-1;
    border: 1px outset;
    border-color:#58585A;
}

我已将Z-index设置为9999 ...菜单栏仍然与选择框重叠。并且选择框没有Z-index集。怎么办......？

Answer 1

来自w3schools.com：

z-index属性指定元素的堆栈顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

Selectbox重叠Superfish菜单栏

1 个答案: