Вот как примерно работает эта тряхомудия.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul.header__city-list {
display:none;
}
a.header__city-link {
cursor:pointer;
color:blue;
}
a.header__city-link:hover {
color:navy;
text-decoration:underline;
}
ul.header__city-list a {
cursor:pointer;
}
a.active,
ul.header__city-list a:hover {
color:brown;
text-decoration:underline;
}
.togD {
display:block!important;
}
</style>
</head>
<body>
<div class="header__center-inner"><div class="header__city">
<span>Ваш город: <a class="header__city-link">выберите город</a></span>
<ul class="header__city-list">
<li><a id="city-belgorod">Белгород</a></li>
<li><a id="city-vladimir">Владимир</a></li>
<li><a id="city-jeleznogorsk">Железногорск</a></li>
<li><a id="city-kursk">Курск</a></li>
<li><a id="city-orel">Орёл</a></li>
</ul>
</div></div>
<script>
var
city_link=document.querySelector('.header__city-link'),
city_list=document.querySelector('.header__city-list'),
city_prefix='city-',
toggle_city_list=function(ev){
ev.stopPropagation();
city_list.classList.toggle('togD');
},
select_city=function(ev){
if(ev.target.nodeName!='A') return;
ev.stopPropagation();
var el=ev.target;
city_link.textContent=el.textContent;
city_link.setAttribute('c',el.id);
var active=city_list.querySelector('.active');
if(active) active.classList.remove('active');
el.classList.add('active');
};
city_link.addEventListener('click',toggle_city_list);
city_list.addEventListener('click',select_city);
/* скрывалка списка по щелчку с туловища */
document.body.addEventListener('click',
function(ev){
city_list.classList.remove('togD');
}
);
</script>
</body>
</html>