html - 父项下的 CSS 子菜单

Question

我有一个导航:

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

子容器设置为不透明度 0，悬停在 LI 上时不透明度变为 1。 现在我有一个问题，子容器有一个边框，并且该边框位于父 LI 元素的顶部。我希望 LI 元素位于子容器子元素的顶部。这样它们看起来就会“合并”。

我尝试了 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在 parent 身上<li>元素，否则绝对定位可能无法正常工作。

我不会说这是 Chrome 的错误，而更像是不同的浏览器在没有足够信息时如何尝试处理不明确的规则。

---

[编辑]:我想我现在明白你的问题了。使顶部边框消失在事件选项卡后面的技巧是将内容实际包装在 <li> 中。 ，然后为其分配比下拉内容更高的 z-index，并更改底部边框颜色以匹配背景，使其消失。

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