reveal submenu when key is hit with JQuery

reveal submenu when key is hit with JQuery

I'm attempting to make my menu accessible.  I would like so that when a user tabs to menu items they are highlighted. (I have this part working).  I'm told that it shouldn't reveal the dropdown until a user hits enter or down key.

This is an abbreviated version of the nav code:

  1.     <nav id="main-menu-con" class="mmenucon">
  2.         <div class="menu-menu-1-container">
  3.             <ul id="menu-menu-1" class="main-menu-items">
  4.                 <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-51"><a href="http://rgb.2bf.myftpupload.com/" aria-current="page">Home</a></li>
  5.                 <li id="menu-item-5508" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5508"><a href="http://rgb.2bf.myftpupload.com/books-more/">Books &amp; More</a>
  6.                     <ul class="sub-menu" style="display: none; visibility: visible;">
  7.                         <li id="menu-item-5517" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5517"><a href="http://rgb.2bf.myftpupload.com/books-more/browse-our-catalog/">Browse our Catalog</a></li>
  8.                         <li id="menu-item-5512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5512"><a href="http://rgb.2bf.myftpupload.com/books-more/learning-and-research/">Learning and Research</a></li>
  9.                     </ul>
  10.                 </li>
  11.                 <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-53"><a href="http://rgb.2bf.myftpupload.com/e-library/">E-Library</a>
  12.                     <ul class="sub-menu" style="display: none;">
  13.                         <li id="menu-item-9223" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9223"><a href="http://rgb.2bf.myftpupload.com/e-library/lynx-libraries-app/">Lynx! Libraries App</a></li>
  14.                         <li id="menu-item-9068" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9068"><a href="http://rgb.2bf.myftpupload.com/e-library/overdrive-libby/">Overdrive/Libby</a></li>
  15.                     </ul>
  16.                 </li>
  17.             </ul>
  18.         </div>
  19.     </nav>

The submenus are initially hidden by jQuery, I believe, by this code:

  1.     jQuery(document).ready(function(){ 'use strict'; jQuery("#main-menu-con ul ul").css({display: "none"});

and revealed on mouseover by this code:

  1.     jQuery('#main-menu-con ul li').hover( function() { jQuery(this).find('ul:first').slideDown(300).css('visibility', 'visible');  }, function() { jQuery(this).find('ul:first').slideUp(100); });

I'm not *sure* this is right, because when you mouseover, the display of submenu goes from "none" to "block".

I've used this code to reveal the menus when Focus is on the the menu links:

  1.     jQuery('#main-menu-con ul li').focusin( function() { jQuery(this).find('ul').css('display', 'block');});

But I would like this to trigger when you click enter (or down etc) and the problem is that this reveals all submenus whenever focus is on one and secondly it doesn't hide them back when focus is gone.

So I added this to re-hide

  1.     jQuery('#main-menu-con ul li').focusout( function() { jQuery(this).find('ul').css('display', 'none');});

which hides submenus as soon as I unfocus, so users won't be able to tab down.