Vi lá no site do Bruno Torres através da indicação do Ricardo para aplicação em um projeto que estou finalizando.

Trata-se de um menu dropdown com a possibilidade de navegação através do teclado. Para tal ação ser possível, usamos um javascript de fácil compreensão.

A marcação HTML é a seguinte:


<ul id="menu">
<li><a href=”/”>Início</a></li>
<li><a href=”/servicos”>Serviços</a>
<ul>
<li><a href=”/servicos/design”>Design</a></li>
<li><a href=”/servicos/prog”>Programação</a></li>
</ul>
</li>
</ul>


O css..


ul{ list-style:none; }
#menu li {
float:left;
position:relative;
}
#menu li ul {
display:none;
position:absolute;
top:0.9em;
left:0;
margin:0;
padding:0;
}
#menu li:hover ul { display:block; }


E o script:


var lis = document.getElementsByTagName('li');
for (var i = 0, li; li = lis[i]; i++){var link = li.getElementsByTagName('a')[0];
if (link){
link.onfocus = function(){
var ul = this.parentNode.getElementsByTagName('ul')[0];
if (ul)
ul.style.display = 'block';
}
var ul = link.parentNode.getElementsByTagName('ul')[0];
if (ul){
var ullinks = ul.getElementsByTagName('a');
var ullinksqty = ullinks.length;
var lastItem = ullinks[ullinksqty - 1];
if (lastItem){
lastItem.onblur = function(){
this.parentNode.parentNode.style.display = 'none';
}
lastItem.parentNode.onblur = function(){
this.parentNode.style.display = ”;
}
}
}
}
}


Para ler o artigo original basta clicar aqui