html - 选择框与 Superfish 菜单栏重叠

Question

菜单栏是一个 super 鱼三层菜单。菜单栏的 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>

组合框的 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 :

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).