JSFiddle - React, Tailwind, and code Playground

by Denis Gorobzeev

HTML

<div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

CSS

.dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;    
  list-style: none;
  display: none;
  
}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}    
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(img/flag_english_active.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(img/flag_russion.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(img/flag_ukraine.png) no-repeat 5px center;
}   

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(img/flag_english.png) no-repeat 5px center;
}
    
.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;    
}
    
.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}
    
.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

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

JavaScript

var menuElem = document.getElementById('dropdown-menu');
    var titleElem = menuElem.querySelector('.title');

    titleElem.onclick = function() {
      menuElem.classList.toggle('open');
    };