AllThingsSmitty/mega-nav

support menu display when tab anchor has focus

dfkaye opened this issue · 1 comments

dfkaye commented

You can add a sibling selector to the li:hover > .mega-menu rule to support keyboard traversal with tab and shift+tab:

li > a:focus + .mega-menu,  /* <= add this line at l. 117 */
li:hover > .mega-menu {
  opacity: 1;
  overflow: visible;
  visibility: visible;
}
AllThingsSmitty commented

@dfkaye thanks for the suggestion but even with using the + sibling selector keyboard navigation fails after you tab to the mega nav's first column list (Item 1); focus on Menu Item 1 is lost. Browsers: Chrome, Firefox, Safari.