JavaScript hover without using a mouse

Question

I'm currently working on a website. I wanted to make it easier to people with disabilities to use. My boss is blind but he uses the program "JAWS" to navigate through things on his computer. What I'm trying to do is when he does on this website, he can press "tab" and the "hover menu" pops open.

.menu .arrow {
    font-size: 11px;
    line-height: 0%;
}
.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}
.sub-menu {
    width: 160%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    background: #2e2728;
}
.sub-menu li {
    display: block;
    font-size: 16px;
}
.sub-menu li a {
    color: white;
}
.menu > ul > li {
    float: left;
    display: inline-block;
    position: relative;
    font-size: 19px;
}

   

<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">

<nav class="menu">
  <ul class="nav nav-pills" class="clearfix">
    <li class="active"><a>Home</a>
    </li>
    <li><a href="#" id="about">About<span class="arrow">&#9660;</span></a>
      <ul class="sub-menu">
        <li><a align="left" href="#">About the Center</a>
        </li>
        <li><a href="#">Membership</a>
        </li>
        <li><a href="#">History</a>
        </li>
        <li><a href="#">Mission</a>
        </li>
        <li><a href="#">Event Calendar</a>
        </li>
        <li><a href="#"> News</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

And this is what I tried to do.

        if (window.addEventListener) {
      var keys = "16";
      window.addEventListener("keydown", function(e) {
        keys.push(e.keyCode);
        if (keys.toString() >= 0) {
          document.getElementById("about").hover();
        };

      });
    };