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/