JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topnavigation">
<ul>
  <li><a href="#">PORTRAIT</a></li>
  <li id="restaurants"><a href="#" class="active">RESTAURANTS</a></li>
  <li id="restaurants_sub">
      <div class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div>
      <div class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div>
      <div class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div>
      <div class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div>
      <div class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div>
      <div class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div>
       </li>
  <li><a href="#">HOTEL</a></li>
  <li><a href="#">FESTE</a></li>
  <li><a href="#">SEMINARE</a></li>
  <li><a href="#">VERANSTALTUNGEN</a></li>
</ul>
</div>

CSS

html { 
  background-color: green;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

* {
   margin: 0;
   padding: 0;
}

#topnavigation {
 position: relative;
    margin: 0;
   padding: 0;
}

li a.active {
	background: #1db6b7;
	color: #FFFFFF;
}

ul {
   position: absolute;
}

 ul li {
   height: 50px;
   display: block;
   font-family: "Helvetica Neue";
   position: relative;
   z-index: 100;
   margin: 5px 0;
 /*  -webkit-animation: menu 2s;
   -webkit-animation-fill-mode: forwards;
   -moz-animation: menu 2s; 
   -moz-animation-fill-mode: forwards; 
   -ms-animation: menu 2s; 
   -ms-animation-fill-mode: forwards; 
   animation: menu 2s; /* Safari and Chrome */
  /* animation-fill-mode: forwards; */
   opacity: 0.7;
}

ul li:hover {
   cursor: pointer;
  }
  
  
ul li:before {
    z-index: 200;
    line-height: 1.3em;
  }
    
  
  li a {
     color: #000000;
	 background-color: #FFFFFF;
     display: block;
     height: 50px;
     padding: 0 20px 0 20px;
     z-index: 100;
     text-decoration: none;
     font-size: 16px;
     line-height: 2.8em;
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
   /*  -webkit-transition: all 0.6s ease-in-out;
     -moz-transition: all 0.6s ease-in-out;
     -ms-transition: all 0.6s ease-in-out;
     transition: all 0.6s ease-in-out;*/
}



 li a:hover {
   opacity: 0.7;
   background-color:#1db6b7;
   color: #ffffff;
/*   padding-right: 4.0em;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;*/
}


#restaurants_sub {
    max-width: 880px;
    min-width: 440px;
    background-color: white;
    opacity: 0.7;
    font-family: "Helvetica Neue";
    color: black;
    z-index: 200;
    padding: 20px;
    overflow: hidden;
    height: auto;
}

.sub_boxes {
    width: 200px;
    position: relative;
    float: left;
   ...