Может это поможет (сорри за говнокодерство):
<ul id="list" style="display: none" tabindex="-1">
<li>
<p>El1</p>
</li>
<li>
<p>El2</p>
</li>
<li>
<p>El3</p>
</li>
</ul>
<button>Show List</button>
<style>
.active{
outline: 1px solid red;
}
</style>
<script>
(function(){
var container = document.getElementById('list');
var items = container.getElementsByTagName('li');
var index = -1;
function move(dir){
!items[index] || (items[index].className = '');
switch (dir)
{
case 'up':
index = (index <= 0) ? items.length-1 : --index;
break;
case 'down':
index = (index == items.length-1) ? 0 : ++index;
break;
default:
throw Error('WTF?');
}
items[index].className = 'active';
}
function toggle(todo){
container.style.display = (container.style.display == 'none') ? '' : 'none';
}
document.addEventListener('keydown', function(e) {
var newIndex = null;
switch (e.keyIdentifier)
{
case 'Up':
e.preventDefault();
move('up');
break;
case 'Down':
e.preventDefault();
move('down');
break;
case 'Enter':
alert('Selected ' + (index+1));
toggle();
break;
}
});
document.querySelector('button').onclick = function() { toggle(); container.focus(); }
})();
</script>
Нужно править на кроссбраузерность, сразу предупреждаю.