JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <header>
        <nav>
            <ul>
                <li class="image1">
                  <a href="index.html">home</a>
                </li>
                <li class="image2">
                    <a href="bedrijf.html">bedrijf</a>
                </li>
                <li class="image3">
                    <a href="diensten.html">diensten</a>
                </li>
                <li class="image4">
                    <a href="pictures.html">foto's</a>
                </li>
                <li class="image5">
                    <a href="contact-page.html">contacteer ons</a>
                </li>
            </ul>
        </nav>
    </header>
</div>

CSS

header {
  background: #ccc;
  
  position: relative;
}

li {
  display: inline-block;
  
  list-style: none;
}

a {
  padding: 5px 10px;
  display: block;
  
  color: #fff;
  
  position: relative;
  z-index: 2;
}


li:before {
  content: '';
  
  width: 100%;
  height: 100%;
  
  position: absolute;
  top: 0;
  left: 0;
  
  z-index: 1;
}

li.image1:hover:before {
  background: red;
}

li.image2:hover:before {
  background: blue;
}

li.image3:hover:before {
  background: green;
}

li.image4:hover:before {
  background: orange;
}

li.image5:hover:before {
  background: pink;
}