Allow tabbing across the sub menu items in Oxygen Menu (for keyboard user)

style.css

/* Allows focus on sub menu items by tabbing menu
------------------------------------------------ */

.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item .sub-menu {
  right: 5000px;
  visibility: visible;
}

.oxy-nav-menu:not(.oxy-nav-menu-open).menu-item .sub-menu .sub-menu {
  right: auto;
}

.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:hover > .sub-menu,
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:focus-within > .sub-menu {
  right: auto;
  opacity: 1;
}

/* Match color changes on focus to be the same as on hover
(This needs to be changed to match colors on website as set in Oxygen)
------------------------------------------------ */

.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:focus-within a,
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item a:focus {
    background-color: #6799b2;
    color: #fff!important;
}

Hi there
thanks for the snippet.
will it work on the new pro-menu?

Thanks a million, David! 🙏

Thank you for this. However there are some issues with it as of Oxygen 3.9.

But my solution for a vertical menu was:

`
/* Allows focus on sub menu items by tabbing menu
------------------------------------------------ */

.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item .sub-menu {
  left: 5000px;
  visibility: visible;
}

.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:hover > .sub-menu,
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:focus-within > .sub-menu {
  left: 100%;
  opacity: 1;
}

`
(for standard menu element only)

Note that this is solution is not considered 100% accessible due to fact that sub menus are opened directly on tabbing. To get 100% accessible you need extra javascript for this (so tabs only opens when pressing enter). But for a menu with only a few subitems this should be ok.

For more info regarding this: https://www.w3.org/WAI/tutorials/menus/flyout/#keyboard-users

This should get you on your way.