将子元素放在其父元素下面

Question

我无法解决这个问题。我试图让菜单项显示在它的子菜单之上。默认情况下，wordpress具有此代码。

<div class="nav--primary">
  <ul class="menu">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>
      <a>List Item</a>
      <ul class="sub-menu">
        <li>subitem</li>
      </ul></li>
  </ul>
</div>

我正在使用这个CSS：

.menu {
  position: relative;
  background-color: orange;
  z-index: 2;
}

.sub-menu {
  position: absolute;
  background-color: maroon;
  z-index: 1;
  top:45px;
}

Here is the jsfiddle。我需要栗色低于橙色。我已经在网上看到了一些示例解决方案，但我无法使用这些代码来解决这些问题。

Answer 1

尝试this：

.menu {
  position: relative;
  background-color: orange;
}

.sub-menu {
  position: absolute;
  background-color: maroon;
  z-index: -1;
  top:45px;
}