JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<!--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>

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;
    position:relative;
}

.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:...

JavaScript

var dropdowns = document.querySelectorAll('[id|="dropdown-menu"]');
each(dropdowns, function(){
    var self = this;
	var titleElem = self.querySelector('.title');
     titleElem.onclick = function() {
   		self.classList.toggle('open');
    }
    var links = self.getElementsByTagName("li");
    each(links, function(){
    	this.onclick = function(){
        	titleElem.innerHTML = this.innerHTML;
            titleElem.style.backgroundImage = getComputedStyle(this.children[0]).backgroundImage;
            self.classList.remove('open');
        }
    });
    
});

function each(elem, callback){
	for(var i = 0, l = elem.length; i < l; i++)
        callback.call(elem[i]);
}