Problem 99% solved. Only one problem remain.
If you could help with it, it would be great.
If the drop-down parent is a link, the menu item link will not work.
only the drop-down links.
how to use:
navigate with tab key until you get to a menu item with drop down.
hit "enter" to open / close drop-down. you can use Tab key to navigate to drop-down menu items and hit Enter to open that page.
Thank you
This is what I did:
add the followin to css
.sp-megamenu-parent .sp-has-child.open > .sp-dropdown{
display: block;
}
and added this JS before the end of the body:
var menuItems = document.querySelectorAll('li.sp-has-child');
Array.prototype.forEach.call(menuItems, function(el, i){
el.querySelector('a').addEventListener("click", function(event){
if (this.parentNode.className == "sp-menu-item sp-has-child") {
this.parentNode.className = "sp-menu-item sp-has-child open";
this.setAttribute('aria-expanded', "true");
} else {
this.parentNode.className = "sp-menu-item sp-has-child";
this.setAttribute('aria-expanded', "false");
}
event.preventDefault();
return false;
});
});