Skip to content

Instantly share code, notes, and snippets.

Last active August 23, 2022 07:32
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

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