gorbuz9kin,
css настройте сами
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by gorbuz9kin</title>
<style type='text/css'>
.dropdown-menu{
width: 100px;
float: left;
}
.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.lang ul li:first-child a {
background: url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu.lang ul li:nth-child(2) a {
background: url(http://abali.ru/wp-content/uploads/2010/12/russia-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu.lang ul li:last-child a {
background: url(http://abali.ru/wp-content/uploads/2010/12/ukraine-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu .title {
display: inline-block;
width: 100%;
height: 20px;
padding: 5px 0 5px 35px;
font-size: 15px;
line-height: 20px;
cursor: pointer;
background: #eaecf0 no-repeat 5px center;
}
.dropdown-menu.lang .title{
background-image: url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png)
}
.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-color:#0085b6;
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;
}
</style>
<script>
window.onload=function(){
document.addEventListener('click', function(event) {
var open = document.querySelector('.dropdown-menu.open');
var target = elem = event.target;
while (target != this) {
if (target.classList && target.classList.contains('dropdown-menu')) {
if(elem.tagName == 'A') {
var titleElem = target.querySelector('.title');
titleElem.innerHTML = elem.textContent;
titleElem.style.backgroundImage = getComputedStyle(elem, null)['backgroundImage']
}
open && open != target && open.classList.remove('open');
target.classList.toggle('open')
return;
}
target = target.parentNode;
}
open && open.classList.remove('open');
})
}
</script>
</head>
<body>
<header>
<div class="header-wrapper">
<!--Dropdown List Language-->
<div id="dropdown-menu-lang" class="dropdown-menu lang">
<span class="title">English</span>
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Русский</a></li>
<li><a href="#">Украинский</a></li>
</ul>
</div>
</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>
</header>
</body>
</html>
