[danik.js]

Может это поможет (сорри за говнокодерство):

<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>

Нужно править на кроссбраузерность, сразу предупреждаю.