JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul id="lang-selection">
    <li id="lang-button"><a href="">Lang</a></li>
    <li class="dropdown">   
      <ul>
        <li style="border-bottom: none;"><a href="fr/hosting">Fr</a></li>
        <li ><a href="en/hosting">En</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

#lang-selection {width: 60px;
text-align: center;
font-size: 12pt;}

#lang-button {list-style-type: none;
padding-right: 18px;
background: url('http://potato.96.lt/dropdown.png') no-repeat top right;
background-color: #f7b900;
color: black;
text-decoration: none;}

#lang-button:hover {background-color: #f4ca5a;}

.dropdown {display: none;
list-style-type:none;
border: 1px solid #f7b900;
color: black;
text-decoration: none;}

.dropdown:hover {background-color: #f7b900;
border-top: 1px solid #fdee00;}

/* on affiche le sous menu quand la souris passe #lang-button et quand la souris est sur le sous menu */
#lang-button:hover + .dropdown,
.dropdown:hover {
 display: block;
}