I have the following HTML structure::

<header style="width: 100%; position: fixed; left: 0; z-index:1;">
  <nav style="position: relative;">
    <button style="width: 20px; height: 4px;">
      open nav
    </button>
    <ul style="width: 100vw; min-height: 100vh; position: absolute; top: 100%; left: 0; z-index: -1;">
      <!-- Some links... -->
    </ul>
  </nav>
</header>

Right now the negative z-index of the ul element makes it appear under the nav element, but I want it to appear under the entire header element.

I would also like to keep this HTML structure.

Help will be appreciated!