Search code examples
cssnavigationpositionz-index

Put a child element underneath its parent

I can't figure this out. I'm trying to have a menu-item be displayed over top of it's submenu. By default wordpress has this code.

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

I'm using this 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. I need the maroon to be below the orange. I've seen some example solutions online but I cannot get any of them to work with this code.

Solution

  • Try this:

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

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