html - 在 css 中，父 ul 后面的子 ul

Question

我正在尝试使用纯 css3 制作我的下拉菜单，但我的子项 ul 一直显示在父项之上。我已经尝试使用 z-index -100，从父级 ul 中删除正的 z-index 值，但没有任何反应。

这是我的代码:

http://jsfiddle.net/z9kCx/

Answer 1

我已经更新了你的 fiddle这里。那行得通吗？

我将菜单和子菜单类添加到您的 ul 并稍微编辑了您的 css:

ul.menu li {
   position: relative;
   width: 100px;
   float: left;
   background: #2A2A2A;
   text-align: center;
   font-size: 14px;
   padding: 15px;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   list-style-type: none;
}

ul.sub-menu {
    padding: 0;
    position: absolute;
    top: 45px;
    left: 0;
    width: 145px;
    display: none;
    opacity: 0;
    visibility: hidden;
}

ul.menu li:hover > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}