在css中父亲ul后面的孩子ul

Question

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

这是我的代码：

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;
}