HTML

Nav bar

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

menu bar nav

menu bar nav

.nav-container{
    max-width:90vw;
    height:100%;
    background-color:yellow;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

navigation menu

<!-- Horisontal-Vertical Menu, https://coursesweb.net/ -->
<ul id="menuv">
 <li class="oli"><a href="https://coursesweb.net/" title="Home">Home</a></li>
 <li class="oli">CSS Tutorials
  <ul>
   <li><a href="https://coursesweb.net/css/css3-new-background-properties_t" title="Border properties">CSS3 Border properties</a></li>
   <li><a href="https://coursesweb.net/css/css3-opacity_t" title="opacity">CSS3 opacity</a></li>
  </ul>
 </li>
 <li class="oli">HTML Tutorials
  <ul>
   <li><a href="https://coursesweb.net/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
   <li><a href="https://coursesweb.net/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
   <li><a href="https://coursesweb.net/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
  </ul>
 </li>
 <li class="oli"><a href="https://coursesweb.net/ex/contact" title="Contact">Contact</a></li>
</ul>

<script type="text/javascript"><!--
// gets all <li> within #menu element
var menuli = document.getElementById('menuv').getElementsByTagName('li');
var nrmenuli = menuli.length;
var oli = [];        // store horisontal menu items
var crt_oli;         // store current horisontal element
var vli = [];        // store vertical menu list in within current horisontal element
var nroli = 0;       // number of horisontal menu items
var nrvli = 0;       // number of vertical menu lists
var url_adr = '';    // store the URL address added in the anchor <a> of current navigated list

// traverse $menuli to add the horisontal menus in $oli
for(var i=0; i<nrmenuli; i++) {
  if(menuli[i].className == 'oli') {
    oli.push(menuli[i]);
  }
}

var ih = -1;     // to store the index of current horizontal item in $oli
var iv = -1;    // to store the index of current vertical item in $vli

// accessed on press the Left /Right arrow keys
// show current horisontal menu
function showOli(index) {
  iv = -1;       // reset imdex of vertical menu when moves to other horisontal menu
  url_adr = '';     // empty this variable

  for(var i=0; i<nroli; i++) {
    oli[i].className = 'oli';
  }
  crt_oli = oli[index];     // store current horisontal element
  crt_oli.className = 'olishow';      // set class="olishow"

  // if current horisontal menu contains vertical menu, store it in $vli, and display it
  if(crt_oli.getElementsByTagName('ul').length > 0 && crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li')) {
    vli = crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li');
    nrvli = vli.length;
    showVli();     // calls showVli() to set class="vli" to all list in its vertical menu
  }
  else {
    // if current horisontal menu no has vertical list
    // if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
    if(crt_oli.getElementsByTagName('a').length > 0) setUrlAdr(crt_oli.getElementsByTagName('a')[0]);
    vli = [];        // empties $vli
    nrvli = 0;
  }
}

// accessed on press the Up /Down arrow keys
// show current vertical menu
function showVli(index) {
  url_adr = '';       // empties this variable
  if(nrvli > 0) {
    for(var i=0; i<nrvli; i++) {
      vli[i].className = 'vli';
    }
    if(index >= 0) {
      vli[index].className = 'vlishow';
      
    // if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
    if(vli[index].getElementsByTagName('a').length > 0) setUrlAdr(vli[index].getElementsByTagName('a')[0]);
    }
  }
}

// adds in $url_adr the "href" value of the anchor element <a> passed in "link" parameter
function setUrlAdr(link) {
  url_adr = link.href;
}

// function with code to get the pressed keyboard key
function KeyCheck(e){
 // https://coursesweb.net/
  nroli = oli.length;
   var keyid = (window.event) ? event.keyCode : e.keyCode;       // get the code of the key pressed

   // modify the index of horisontal /vertical item, calls the indicated function according to pressed key
   switch(keyid) {
      // Left
      case 37:
        ih--;
        if(ih < 0) ih = 0;
        showOli(ih);
        break;
      // Up
      case 38:
        iv--;
        if(iv < 0) iv = 0;
        showVli(iv);
        break;
      // Right
      case 39:
        ih++;
        if(ih >= nroli) ih = 0;
        showOli(ih);
        break;
      // Down
      case 40:
        iv++;
        if(iv >= nrvli) iv = 0;
        showVli(iv);
      break;
      // Enter (opens the link)
      case 13:
        if(url_adr != '') window.location = url_adr;
        break;
   }
}

// access the KeyCheck() function when a keyboard button is pressed
document.onkeydown = KeyCheck;
--></script>