Z-index - how to hide a child element behind the parent?

Question

css

It's night outside, my head is breaking a
simple task, which, it seems, I encounter on a daily basis. the code looks like this:

<header> <!-- мамка -->
  <div id="header">
    <nav>
      <ul>
        <li>
          <ul> <!-- чадо -->

but imagine the code is like this:

<header> <!-- мамка - position:fixed; bg-color: white -->
        <li>
          <ul> <!-- чадо - position:absolute -->

How to hide the "child" under the "mother"?
What should be given to the intermediary <li>?
I’ve just been fighting for an hour, it seems to me that I’m just running a couple of methods in a circle and don’t move from a place. I
specially glued the test site: codepen.io/anon/pen/zvyMVZ
tags are different, but the essence is the same

Answer 1

So

Answer 2

z-index 1
z-index 0

Answer 3

ul {
  background-color: inherit;
}

codepen.io/corvus-007/pen/EVGJxm?editors=110