<ul class="focus" tabindex='0'>
    <li class="active"><a href='#'>Text 1</a>

    </li>
    <li><a href='#'>Text 2</a>

    </li>
    <li><a href='#'>Text 3</a>

    </li>
    <li><a href='#'>Text 4</a>

    </li>
    <li><a href='#'>Text 5</a>

    </li>
    <li><a href='#'>Text 6</a>

    </li>
    <li><a href='#'>Text 7</a>

    </li>
    <li><a href='#'>Text 8</a>

    </li>
    <li><a href='#'>Text 9</a>

    </li>
    <li><a href='#'>Text 10</a>

    </li>
    <li><a href='#'>Text 11</a>

    </li>
    <li><a href='#'>Text 12</a>

    </li>
</ul>

<script>

$(".focus").keydown(function (e) {
    e.preventDefault();

    if (e.which == 40) {
        var next = $('.active').removeClass('active').next('li');
        next = next.length > 0 ? next : $('.focus li:eq(0)');
        next.addClass('active').children('a').focus();
    } else if (e.which == 38) {
        var prev = $('.active').removeClass('active').prev('li');
        prev = prev.length > 0 ? prev : $('.focus li').last();
        prev.addClass('active').children('a').focus();
    }
});

</script>


<style>

.focus {
    height:60px;
    list-style-type:none;
    overflow:auto;
}
.focus li a {
}
.focus li.active {
    background:#f6f6f6;
}

</style>