<style>
#c {
height: 150px;
width: 150px;
float: right;
}
#menu {
display: inline-block;
border: 1px inset #999;
padding: 44px;
cursor: pointer;
box-shadow: 0 0 8px #aaa;
}
#menu:hover { border: 1px inset #333; }
ul{
list-style-type:none;
max-height: 400px;
overflow: hidden;
overflow-y: auto;
width: 50%;
margin: 40px;
}
li{
margin-left: 20px;
line-height: 20px;
padding: 5px;
}
.letter{
margin-left: 0;
font-weight: bold;
}
</style>
<body>
<div id="c">Color</div>
<ul id="menu">
Select Website
<li class="letter">Random</li>
<li>Zufall (8)</li>
<li>Zufall (alle)</li>
<li class="letter">A</li>
<li>aagz.ethz.ch</li>
<li>arolla.ethz.ch</li>
<li>asmena.ethz.ch</li>
<li class="letter">B</li>
<li>baufak.ethz.ch</li>
<li>bauing-diplomreise.ethz.ch</li>
<li>bauoek-modell.ethz.ch</li>
<li>bendit.ethz.ch</li>
</ul>
<script>
var c = document.getElementById('c');
var menu = document.getElementById('menu');
var options = menu.getElementsByTagName('li')
for (var i = 0; i < options.length; i++) {
options[i].style.display = 'none';
options[i].addEventListener('mouseenter', function () {
var aaa = this.getAttribute('data-url');
//if (this.querySelector('[data-url]')) {
console.log(aaa);
//}
c.innerHTML = this.innerText;
})
}
menu.addEventListener('click', function () {
for (var i = 0; i < options.length; i++) {
options[i].style.display = options[i].style.display != 'none' ? 'none' : 'block';
}
})
</script>