选择框重叠Superfish菜单栏

菜单栏是超级3层菜单。菜单栏的CSS代码是： -选择框重叠Superfish菜单栏

/*** 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： -

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

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

来源

2013-03-08 rams

set Z-index = 0;选择框 – 2013-03-08 10:13:32

请提供一个jsFiddle – Nobita 2013-03-08 10:20:21

@rams如果您的选择框有类或样式选项，然后把Z-Index = -1或0（Nayana Adassuriya已经说过）否则请发布一些Html代码 – snowp 2013-03-08 10:22:21

w3schools.com来自：

的z索引属性指定的元素的堆叠顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。注：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

来源

2013-03-08 10:15:09 Morpheus

http://w3fools.com/（友情提醒） – Nobita 2013-03-08 10:29:04

我知道:)但这个解释很好:) – Morpheus 2013-03-08 10:31:52

如果您同意我们最好避免引用w3schools。尽管如此，你的回答是完全正确的，事实上你得到了我的赞赏。 ;-) – Nobita 2013-03-08 10:35:07

选择框重叠Superfish菜单栏

回答

相关问题