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

概述我使用纯css3制作了下拉菜单,但是一个属性(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;}