I'm almost done with my first jquery attempt.  I am trying to make a drop down navigation menu available to people who use a mouse, as well as those who use a keyboard (or screen reader), and to have a backup if JS is turned off. My test site with the global nav bar on top can be seen here: http://checkoutacollege.com:8080/ . If the user has JS off, then when they click on a top-level menu item it will take them to a separate page with the menu in html.

 

Currently, a keyboard user can tab through all menus.  Not a very pleasant user exerpience in my opinion, but it works.

 

The problem is that if a mouse user with JS turned on hovers over a top level item, then clicks it, the menu persists after they move their mouse away.  This can lead to multiple menus displayed on the page. 

 

I tried using focusout, but that keeps the keyboard user (using the tab key) from seeing the drop down menus.

 

If anyone has a suggestion for this last piece in the puzzle I'd be grateful.