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

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

这是jsfiddle。我需要栗色低于橙色。我在网上看到了一些示例解决方案，但我无法让其中任何一个使用此代码。

Answer 1

试试这个：

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