JSFiddle - React, Tailwind, and code Playground

HTML

<a id="down-button" class="button">Down</a>

<a id="video-button" class="button">Video</a>
setTimeout(function(){keyboardDown(action);},500);
<ul id="main-menu">
    <li class="menu-item selected">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Video</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
    <li class="menu-item">Test</li>
</ul>

CSS

* {
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}
#main-menu {
    list-style:none;
    padding:5px;
    margin:0;
}
.menu-item {
    color:blue;
}
.selected {
    background-color:red;
}
.button {
    height:30px;
    width:60px;
    display:block;
    background:#424242;
    border:2px solid #565555;
    border-top:2px solid #707A80;
    border-bottom:2px solid #484141;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#eee;
    text-align:center;
    line-height:30px;
    margin-bottom:5px;
}
.button:hover {
    cursor:pointer;
}

JavaScript

$("#down-button").click(function () {
    keyboardDown(1);
});

$("#video-button").click(function () {
    keyboardDown()
});

function keyboardDown(one_step) {
    var $next = $('.menu-item.selected').removeClass('selected').next('.menu-item')
    if ($next.length) {
        $next.addClass('selected');
    } else {
        $(".menu-item:first").addClass('selected');
    }
    if(one_step == 1){return;}
    
    if($next.text() != 'Video'
      ){
        setTimeout(function(){keyboardDown();},500);    
    }
}