0

我有一个导航：

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

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

我尝试了在 FireFox 中完美运行的 z-index -1 解决方案，但在 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;
}

这是我的页面菜单的链接。（非常慢，在糟糕的服务器上。）

4

1 回答 1

1

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

我不会说这是 Chrome 的错误，但更像是当没有足够的信息时，不同的浏览器如何尝试处理模棱两可的规则。

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

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

于 2013-09-21T19:11:38.920 回答