Making Marketers Delight 100% Accessible : Use tab buttons on https://gauravtiwari.org to see it in action.

1-menu-customize.css

@media screen and (min-width:800px){
.menu-item-has-children:hover .sub-menu, .menu-item-has-children:focus > .sub-menu, .menu-item-has-children:focus-within .sub-menu{
    display: grid	; /* You can also use block or flex here */
    grid-template-columns: repeat(2,1fr); /* remove if not display:grid */
    width: max-content;
    padding: 1em;
	right:0;
	margin-right:calc(0px - 10vw);
	}
}

2-aria-pressed.js

// Add aria-pressed or aria-pressed="false" in all theme buttons and input[type=submit] elements by default for this to work.
    const toggle = document.querySelector('[aria-pressed]');
    toggle.addEventListener('click', e => {
      let pressed = e.target.getAttribute('aria-pressed') === 'true';
      e.target.setAttribute('aria-pressed', !pressed);
    });

3-aria-pressed.css

[aria-pressed],input[aria-pressed]{
top:-.25rem;left:-.25rem;box-shadow:.125em .125em 0 #8b0000,.25em .25em #8b0000
}
[aria-pressed=true],[aria-pressed]:hover,input[aria-pressed=true]{
box-shadow:none
}

You can customize css as per your needs.