選擇框重疊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菜單欄

回答

相關問題