JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="home_menu">
            <li class="arrow-link"><a href="http://www.digitalbrent.com/blog/">Blog</a></li>
            <li><a href="http://www.digitalbrent.com/resume/">Resume</a></li>
            <li><a href="http://www.digitalbrent.com/portfolio/">Portfolio</a></li>
            <li><a href="http://www.digitalbrent.com/tools">Tutorials</a></li>
            <li><a href="http://www.digitalbrent.com/contact/">Contact</a></li>
        </ul>

CSS

#home_menu{
    width: 150px;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
    margin-left: -75px;
}

#home_menu li{
    list-style: none;
    margin-top: 20px;
    padding-left: 20px;
    display: block;
    font-size: 20px;
    font-family: verdana;
}

#home_menu li a{
    color: black;
    text-decoration: none;
}


.arrow-link{
       background: url(http://www.digitalbrent.com/wp-content/themes/DigitalBrent/media/images/selectArrow.png) no-repeat;
       background-position: 0 3px;
    }

JavaScript

var pos = 1;

            jQuery(document).keydown(function (e) {

                switch (e.which) {

                    case 38: // up

                        pos--;

                        if (pos > 5) {
                            pos = 1;
                        } else if (pos < 1) {
                            pos = 5;
                        }

                        moveArrow(pos, e.which);

                        break;

                    case 40: // down

                        pos++;

                        if (pos > 5) {
                            pos = 1;
                        } else if (pos < 1) {
                            pos = 5;
                        }

                        moveArrow(pos, e.which);

                        break;

                    case 13: // enter
                        
                        console.log("Keystroke Value: " + e.which + " (Enter)");
                       
						document.querySelector('.arrow-link a').click();
                        break;


                    default:
                        return; // exit this handler for other keys
                }
                e.preventDefault(); // prevent the default action (scroll / move caret)
            });

            function moveArrow(pos, e) {

                console.log("Position counter: " + pos);
                console.log("Keystroke Value: " + e);
                jQuery("#home_menu").children().removeClass("arrow-link");
                jQuery("#home_menu li:nth-child(" + pos + ")").addClass("arrow-link");

            }