JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li><a href="#">Acasa</a></li>
  <li><a href="#">Despre noi</a></li>
  <li><a href="#">Evenimente</a></li>
  <li class="products"><a href="#">Produse</a>
    <ul class="submenu">
      <li><a href="#">Produs 1</a></li>
      <li><a href="#">Produs 2</a></li>
      <li><a href="#">Produs 3</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

CSS

*{
  margin: 0;
}
ul{
  padding: 0;
  list-style-type: none;
}
.menu > li{
  display: inline-block;
  margin-right: 10px;
}
.menu > li a:hover{
  color: #D24D57;
}
.menu li a{
  display: block;
  text-decoration: none;
  font-size: 14px;
  color: #16A085;
  padding: 10px;
  transition: all 300ms ease-in-out;
}
.menu .products{
  position: relative;
}
.menu .submenu{
  background-color: white;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100px;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease-in-out;
}
.menu .submenu li a:hover{
  background-color: #16A085;
  color: white;
}
.menu .products:hover .submenu{
  opacity: 1;
  visibility: visible;
}