I am trying to get the top nav bar's drop down menu working with the keyboard. What should happen is when a user presses the tab key and the top menu item is reached, the drop down should show just like the mouse hover event does.

Typically, I just add a function to the onfocus event that calls the mouseover event, but that isn't working. The following code causes a "TypeError: Object doesn't support property or method 'mouseover'" error.

2 Answers
2

It took a lot of trial and error, but I finally found a way to get keyboard users able to see the drop down menus. The fix below will only work in IE (I'm working on the cross-browser version, so if you need it, let me know).

While I was tracing the events, I discovered that the only changes were the addition of the class name to the li elements and the styles to the child ul element. I also discovered that for some reason, the tabIndex attribute had to be added to make this work.

Those people stumbling across this solution by Leeland may be interested in the slightly updated version for SharePoint 2013 below. I have also added a second if statement to distinguish between dynamic sub menus.