CSS子菜單

Question

我有一個導航：

<ul> 
<li>Button 
    <div class="sub-container">Sub navigation</div> 
</li> 
</ul> 

子容器設置不透明度0和李不透明的懸停變爲1 現在我有一個子容器具有邊界問題並且該邊框位於父LI元素的頂部。我希望LI元素位於子容器子元素的TOP上。這樣他們會看起來「合併」。

我試過z-index -1解決方案，它在FireFox中完美工作，但在Chrome中它崩潰。

截圖：

這是我的CSS代碼：

#topBarHeader nav ul.main-nav { 
    list-style: none; 
    position: absolute; 
    left:0; 
    display: inline-block; 
    z-index: 100; 
} 
#topBarHeader nav ul.main-nav > li { 
    float: left; 
    display: inline-block; 
    padding: 15px 17px 10px 17px; 
    border: 1px solid rgba(255, 255, 255, 0); 
    margin-right: 10px; 
} 
#topBarHeader nav li .sub-container { 
    position: absolute; 
    top: 49px; 
    left: 0px; 
    width: 640px; 
    opacity: 0; 
    visibility: hidden; 
    overflow: scroll; 
    overflow-x: hidden; 
    height: 380px; 
    background: white; 
    z-index: -1; 
    border: 1px solid #d5dbdf; 

} 
#topBarHeader nav li:hover > .sub-container { 
    opacity: 1; 
    visibility: visible; 
} 

Here is the link to my page menu.（很慢，一個壞的服務器上。）

Answer 1

你應該嘗試父<li>元素上宣佈position: relative ，否則絕對定位可能無法正常工作。

我不會說這是Chrome的一個bug，但更像是不同的瀏覽器在沒有足夠的信息時試圖處理不明確的規則。

---

[編輯]：我想我現在明白你的問題。使頂部邊框消失在活動選項卡後面的技巧是實際將內容包裝在<li>中，然後將其分配給與下拉內容相比更高的z-index，並更改底部邊框顏色以匹配背景，以便它消失了。

這裏是一個小提琴作爲證明的概念 - http://jsfiddle.net/teddyrised/EPYvq/