Javascript-форум - Выпадающий список по клику

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>