JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <header>
    <nav>
      <ul>
        <li>
          <a href="index.html">home</a>
          <div style="background:green">
          </div>
        </li>
        <li>
          <a href="bedrijf.html">bedrijf</a>
          <div style="background:yellow">
          </div>
        </li>
        <li>
          <a href="diensten.html">diensten</a>
        </li>

        <li>
          <a href="pictures.html">foto's</a>
        </li>
        <li><a href="contact-page.html">contacteer ons</a></li>

      </ul>
    </nav>
  </header>

CSS

header {
  position: relative;
  width: 100%;
  background: red;
}

ul li a {
  position: relative;
  z-index: 3;
}

ul li:hover div {
  z-index: 1;
}

ul li div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}