我使用纯css3制作了下拉菜单,但是一个属性(z-index)没有按照我的预期工作,这是一个非常大的问题,因为下拉列表正在下降菜单.理想情况下,它必须在菜单下删除.我整天试图对这个问题做点什么,但遗憾的是无法弄明白,所以现在请求帮助......我为问题项目做了不同的背景颜色,以便很好地看到我正在努力达到.主要目的是红色背景的子菜单必须在蓝色背景下.
PS我已经尝试用jQuery slideDown/slideUp属性制作这个菜单,但它们看起来不像理想的幻灯片效果(如我的例子).它们看起来更像拉伸,而这不是我想要的......
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 …