How to place HTML elements in vertical direction using position: absolute without Overlapping

Question

I have the following code

HTML

<div class="sidenav">
<ul>
  <li class="nav-item">
    <a class="nav-link">
      Home
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link">
      About
    </a>
  </li>
</ul>
<ul id="language-menu">
  <li class="nav-item">
    <a class="EN nav-link">
      EN
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link">
      FR
    </a>
  </li>
</ul>
</div>

CSS

.sidenav {
    position: relative;
}

.sidenav ul {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

.sidenav ul#language-menu li{
    display: inline-block;
}

The problem is that the second <ul> element is on top of the first <ul>. Is there a way I can place the lists one above the other by using absolute position? If not, what is another CSS layout alternative to approach this.

Answer 1

As @jmalenfant advises, changing the position to the parent container and letting the children be relative would get what I believe you're looking for

.sidenav {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

.sidenav ul#language-menu li{
    display: inline-block;
}

<div class="sidenav">
  <ul>
    <li class="nav-item">
      <a class="nav-link">
        Home
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        About
      </a>
    </li>
  </ul>
  <ul id="language-menu">
    <li class="nav-item">
      <a class="EN nav-link">
        EN
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        FR
      </a>
    </li>
  </ul>
</div>