JSFiddle - React, Tailwind, and code Playground

HTML

<div class='menudiv'>
  <ul>
    <li class='dropdown'>
      <a>
         &#9776;
      </a>    
      <div class='menu2'>
          <ul>
              <li><a>Meten</a></li>
              <li><a>Huidige waardes</a></li>
              <li><a>Geschiedenis</a></li>
              <li><a>Contact</a></li>
          </ul>
      </div>
    </li>
    <li><a href="#login"><img src='pp.png' alt='LogIn' height='90px' width="95px" onmouseover="this.src='ppwit.png'" onmouseout="this.src='pp.png'"></a></li>
  </ul>
</div>
<div class='logo'>
  <a href="#home"><img src='flowy_logo.png' alt='Logo' height='95px', widht='95px' onmouseover="this.src='flowy_logowit.png'" onmouseout="this.src='flowy_logo.png'" /></a>
 </div>

CSS

.menudiv ul {
  display: flex;
  font-family: "Georgia", "Times New Roman", "Serif";
  font-size: 25px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgb(102, 75, 255);
  justify-content: space-between;
}

.menudiv ul li {
  position: relative;
  cursor: pointer;
}

.menudiv ul li a {
  display: block;
  padding: 8px;
}

.logo img {
  position: relative;
  top: -105px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.menu2 ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.menu2 ul li a {
    display: block;
    width: 200px;
    background-color: rgb(102, 75, 255);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.menu2 ul li a:hover {
    color: white;
    cursor: pointer;
}

.menu2 {
    display: none;
}

.dropdown:hover .menu2 {
    display: flex;
}