将子元素置于其父元素之下

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

将子元素置于其父元素之下

Put a child element underneath its parent

css

navigation

position

z-index