JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav nav--primary" role="navigation">
       
                <a href="/" title="Home" class="primary-nav-link parent active" data-position="1" tabindex="1">wasd</a>
				
               <div class="nav__dropdown">
                        <a class="primary-nav-link parent " tabindex="1">wasd</a>
                    <span class="nav__expand"></span>
                    <div class="nav__dropdown__content" aria-hidden="true">
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a>
                    </div>
                </div>
				
                <div class="nav__dropdown">
                        <a class="primary-nav-link parent " tabindex="1">wasd</a>
                    <span class="nav__expand"></span>
                    <div class="nav__dropdown__content" aria-hidden="true">
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a>
                            <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a>
                    </div>
                </div>
				
				 <div class="nav__dropdown">
                        <a class="primary-nav-link parent " tabindex="1">wasd</a>
                    <span...

CSS

.nav--primary .active:hover:after,.nav__brochure,.nav__show,.nav__tel {
                    display: none
                }
 .hover .nav__dropdown__content {display: block;visibility: visible;}
 .navSelected{outline: 2px solid blue; background-color: green;}
                .nav--primary {
                    display: block;
                    font-weight: 700;
                    text-align: left;
                    position: relative;
                    width: calc(100% - 10px);
                        float: right;
                    margin-bottom: 10px;
                    font-size: 17px!important
                }

                .is-partner .nav--primary {
                    width: 100%
                }

                .nav--primary>:last-child.nav__dropdown .nav__dropdown__content {
                    left: auto;
                    right: 0
                }

                .nav--primary a {
                    padding: 16px;
                    display: inline-block;
                    vertical-align: top;
                    color: #007ab2;
                    font-weight: 500;
                    line-height: 20px!important
                }

                .nav--primary a:active,.nav--primary a:focus,.nav--primary a:hover {
                    background: #d8d8d8
                }

                .nav--primary .active {
                    color: #141760;
                    position: relative
                }

                .nav--primary .active:after {
                    content: "";
                    border-style: solid;
                    border-width: 0 9px 8px;
                    border-color: transparent transparent #141760;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    margin-left: -9px
                }

                .nav--primary .active:hover {
                    background: #d8d8d8;
                    color: #141760
                }

   ...

JavaScript

$(".parent").focus(function(){
	
	$(this).closest(".nav__dropdown").addClass("hover"); 
	$('.hover .nav__dropdown__content a').first().addClass('navSelected');

		$(document).keydown(function(e) {
			var selected = $('.navSelected');
			var sub = $('.hover .nav__dropdown__content a');
  
  
			if(e.which === 40){
  
				if(selected){
					selected.removeClass('navSelected');
					next = selected.next();
						if(next.length > 0){
							selected = next.addClass('navSelected');
						}else{
							selected = sub.eq(0).addClass('navSelected');
						}
				}else{
					selected = sub.eq(0).addClass('navSelected');
				}
				
				
			}else if(e.which === 38){
				if(selected){
					selected.removeClass('navSelected');
					next = selected.prev();
					if(next.length > 0){
                selected = next.addClass('navSelected');
					}else{
						selected = sub.last().addClass('navSelected');
					}
				}else{
				selected = sub.last().addClass('navSelected');
				}
			}
		});
		
}).blur(function(){     
	$(".nav__dropdown").removeClass("hover");
	$(document).removeClass("navSelected");
})