drop down challenge using grid box and flex with a lil javascript

I hope this resource helps you nested-navigation .

From the above resource, you will see how to write accessible drop down menus. Use it as a template to get to your final outcome.

It might be useful to omit this part when implementing your own solution:

// event delegation
document.addEventListener('focusin', function(event) {
    // reset list style on every focusin
    reset();

    // check if a[aria-haspopup="true"] got focus
    var target = event.target;
    var hasPopup = target.getAttribute('aria-haspopup') === 'true';
    if (hasPopup) {
        open(event.target.nextElementSibling);
        return;
    }

    // check if anchor inside sub menu got focus
    var popupAnchor = target.parentNode.parentNode.previousElementSibling;
    var isSubMenuAnchor = popupAnchor && popupAnchor.getAttribute('aria-haspopup') === 'true';
    if (isSubMenuAnchor) {
        open(popupAnchor.nextElementSibling);
        return;
    }
})