html – CSS – Z-index不适用于相对和绝对的头寸

我使用纯css3制作了下拉菜单,但是一个属性(z-index)没有按照我的预期工作,这是一个非常大的问题,因为下拉列表正在下降菜单.理想情况下,它必须在菜单下删除.我整天试图对这个问题做些什么,但遗憾的是无法理解,所以现在寻求帮助……
我为问题项目制作了不同的背景颜色,以便很好地了解我想要达到的目标.主要目的是红色背景的子菜单必须在蓝色背景下.

附：我已经尝试使用jQuery slideDown / slideUp属性创建此菜单,但它们看起来不像理想的幻灯片效果(如我的示例中所示).它们看起来更像拉伸,而这不是我想要的……

EXAMPLE ON JSFIDDLE

ul {
  list-style-type: none;
}
.menu_wrapper {
  position: relative;
  z-index: 999;
  /* IS NOT WORKING... O_o...*/
  height: 70px;
  width: 600px;
  background-color: blue;
}
.menu li {
  display: inline;
  float: left;
  display: table;
  height: inherit;
  margin: 3px;
  margin-top: 10px;
}
.menu li a {
  display: table-cell;
  font-family: Verdana;
  font-size: 16px;
  color: gold;
  text-align: center;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  background: #05487F;
  transition: .2s ease-in-out;
}
.sub-menu {
  position: absolute;
  z-index: 1;
  /* IS NOT WORKING... O_o...*/
  margin-top: -200px;
  margin-left: -132px;
  padding: 15px;
  padding-top: 20px;
  background-color: red;
  transition: all 1s ease-in-out;
}
.sub-menu li {
  float: none;
}
.sub-menu li a {
  padding: 5px 15px;
}
.menu li a:hover + .sub-menu {
  margin-top: 40px;
}
.sub-menu:hover {
  margin-top: 40px;
}

最佳答案

问题是当你设置z-index：999时,你在.menu_wrapper上是establishing a stacking context.当建立堆叠上下文时,你不能将后代元素放在祖先后面.

从.menu_wrapper中删除z-index：999：

.menu_wrapper {
  position: relative;
  /* z-index: 999; << remove */
  height: 70px;
  width: 600px;
  background-color: blue;
}

然后将.sub-menu上的z-index从1更改为负数,例如-1：

Updated Example

.sub-menu {
  position: absolute;
  z-index: -1;
  margin-top: -200px;
  margin-left: -132px;
  padding: 15px;
  padding-top: 20px;
  background-color: red;
  transition: all 1s ease-in-out;
}