JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li>  
      English
      <span class="qwe">
        <br>ййй</br>
      </span>
    </li>
    <li>
      Русский
      <span class="qwe">
        <br>фффф</br>
      </span>
    </li>
    <li>
      Украинский
      <span class="qwe">
        <br>яяя</br>
      </span>
    </li>
 </ul>
</div>

CSS

.dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;    
  display: none;
  
}
.dropdown-menu ul li {
    background: #0085b6;
    height: 45px;
}

.dropdown-menu ul li:hover{
  background:red;
} 
.dropdown-menu ul li a {
  display: block;
  padding: 5px 35px;
} 

.dropdown-menu .title {
    display: inline-block;
    width: 98px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    border: 1px solid blue;
}

.dropdown-menu.open ul {
  display: block;
}

JavaScript

window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if(elem.tagName == 'A') titleElem.innerHTML = elem.textContent;
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode
      }
    menuElem.classList.remove('open');
}
}