Selectbox overlapping The Superfish Menu Bar

Question

The menu bar is a superfish 3-layer menu. The code for the css of the menu bar is :-

 /*** 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 code for the select box is :-

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

CSS for forCombobox : -

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

I have set the Z-index as 9999 ...still the menu bar is overlapping the select Box. And the select box has no Z-index set . What to do...?

@rams If Your Selectbox have class or style option then put Z-Index = -1 or 0( Nayana Adassuriya already said ) otherwise Please Post some Html Code — snowp, Mar 08 '13 at 10:22
@rams after adding Z-Index = -1 in .forCombobox class its worked or not ? — snowp, Mar 08 '13 at 12:24
@rams I created Jfiddle http://jsfiddle.net/bsPrabu/7fATP/2/embedded/result/ please check that and tell me what u want to change — snowp, Mar 08 '13 at 13:31
@snowp Hey thanks for the fiddle. It works on ur fiddle.I hv just uploaded my fiddle:- [link](http://jsfiddle.net/rams1234/hfkQn/2/).The select box is overlapping the menu bar. — rams, Mar 11 '13 at 08:18
@rams Add ul and li close tag end of the Superfis menu html before the dropdown — snowp, Mar 12 '13 at 07:21

score 3 · Answer 1 · edited Mar 08 '13 at 10:28

3

From 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).

edited Mar 08 '13 at 10:28

Barnee

3,212
8
41
53

answered Mar 08 '13 at 10:15

Morpheus

8,829
13
51
77

If you agree with that we'd all better avoid referencing w3schools at all. Still, your answer is totally fine, you got my upvote in fact. ;-) – Aurelio Mar 08 '13 at 10:35

Selectbox overlapping The Superfish Menu Bar

1 Answers1