其父级下的CSS子菜单

Question

我有导航：

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

子容器设置为不透明度0，并且在LI不透明度悬停时变为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

您应该尝试在父position: relative元素上声明<li>，否则绝对定位可能无法正常工作。

我不会说这是Chrome的错误，但更像是在没有足够信息时不同浏览器尝试处理模糊规则的方式。

---

[编辑]：我想我现在明白你的问题。使顶部边框消失在活动标签后面的技巧是将内容实际包装在<li>中，然后与下拉内容相比为其分配更高的z-index，并更改底部边框颜色以匹配背景让它消失。

这是一个小提琴作为概念验证 - http://jsfiddle.net/teddyrised/EPYvq/