Css 将子项设置在父项之上

嗨，我有一个问题，我在我的css，我不能完全明白如何解决我不知道，如果甚至有一种方法来解决它，但这里去

假设我们有这个html：

<ul id="menu">
   <li>
       <a href="#">Auto-moto, piese, accesorii<i class="icon-caret-right"></i></a>
       <ul class="product-submenu">
                <li><a href="#"><i>Auto-moto, piese, accesorii</i> <span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Auto-moto, piese, accesorii</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
         </ul>
   </li>
</ul>

例如，如果我希望能够将ul#菜单设置在ul.product-子菜单的顶部，鉴于ul.product-子菜单是ul#菜单的子菜单，我将如何实现这一点

这个问题可以很容易地用z-index解决，标签是兄弟，但在这种情况下，我似乎无法理解

---

我在这个链接中添加了一个提琴，我想要的是能够将红色容器设置在绿色容器的顶部：

李斯特先生的建议有效，如果您将20px添加到ul.product子菜单的top属性，那么它将打开子菜单

JSFiddle:

如果只将20px添加到top属性中，您甚至可以不使用z索引

如果您想让菜单在术语的另一个含义中位于顶部，那么您可以尝试以下方法： JSFiddle:

---

李斯特先生的建议是有效的，如果你在ul.product子菜单的top属性中添加20px，那么它将显示子菜单

JSFiddle:

如果只将20px添加到top属性中，您甚至可以不使用z索引

如果您想让菜单在术语的另一个含义中位于顶部，那么您可以尝试以下方法： JSFiddle:

---

我在这里添加了您要求的字段：您可以给孩子一个z索引-1，如中所示，但我不确定这是您想要达到的效果。我的意思是，内部ul的顶行变得不可见，因为它被父ul的第一行隐藏。我在这里添加了您要求的字段：您可以给孩子一个z索引-1，如中所示，但我不确定这是您想要达到的效果。我的意思是，内部ul的顶行变得不可见，因为它被父ul的第一行隐藏。

ul#menu{
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow:         5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    position:relative;
}
ul.product-submenu{
     position:absolute;
}

ul.product-submenu{
     position:absolute;
    background-color:green;
    top:20px;
    left:100px;
    z-index:-1;
}

ul#menu{
    background-color:red;
}
ul.product-submenu{
    position:relative;
    background-color:green;
    top:0;
    left:100px;
    width: 50%;
    z-index: -1;
}