JSFiddle - React, Tailwind, and code Playground

by Denis Gorobzeev

HTML

<header>
   <div class="header-wrapper">
        <!--Dropdown List Language-->
        <div id="dropdown-menu-lang" class="dropdown-menu clearfix">
          <span class="title">English</span>
          <ul>
            <li><a href="#">English</a></li>
            <li><a href="#">Русский</a></li>
            <li><a href="#">Украинский</a></li>
         </ul>
        </div>

        <!--Dropdown List Currency -->
        <div id="dropdown-menu-currency" class="dropdown-menu-currency">
          <span class="title">UAH</span>
          <ul>
            <li><a href="#">USD</a></li>
            <li><a href="#">RUB</a></li>
            <li><a href="#">EUR</a></li>
            <li><a href="#">UAH</a></li>
          </ul>
        </div>

    </div>
</header>

CSS

* {
    margin: 0;
    padding: 0;
}
.clearfix:after {
    content: "";
    clear: both;
    display: table;
}
header {
    background: #eaecf0;
    height: 40px;
}
.header-wrapper {
    width: 1150px;
    margin: 0 auto;
}

/* Dropdown List Language  */
.dropdown-menu,
.dropdown-menu-currency {
    display: inline-block;
    width: 200px;
}

.dropdown-menu ul,
.dropdown-menu-currency ul {
  margin: 0;
  padding: 0;
  width: 145px;    
  list-style: none;
  display: none;
  
}
.dropdown-menu ul li, 
.dropdown-menu-currency ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover,
.dropdown-menu-currency ul li:hover {
    background: #1d9fcb;
}    
.dropdown-menu ul li a, 
.dropdown-menu-currency 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,
.dropdown-menu-currency .title {
    display: inline-block;
    width: 110px;
    height: 26px;
    padding: 5px 0 5px 35px;
    font-size: 15px;
    line-height: 30px;
    cursor: pointer;
    background: #eaecf0 url(img/flag_english.png) no-repeat 5px center;
}
.dropdown-menu .title a,
.dropdown-menu-currency .title a  {
    color: #000;
    text-decoration: none;
}    
.dropdown-menu .title::after,
.dropdown-menu-currency .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 30px;
  margin-right: 5px;    
}
.dropdown-menu.open a,
.dropdown-menu-currency.open a {
    color: #fff;
}

.dropdown-menu.open .title,
.dropdown-menu-currency.open .title {
  background: #0085b6...

JavaScript

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