Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Making Marketers Delight 100% Accessible : Use tab buttons on to see it in action.
@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;
margin-right:calc(0px - 10vw);
// 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 ='aria-pressed') === 'true';'aria-pressed', !pressed);
top:-.25rem;left:-.25rem;box-shadow:.125em .125em 0 #8b0000,.25em .25em #8b0000
Copy link

wpgaurav commented Aug 23, 2022

You can customize css as per your needs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment