I am using Nick Arce’s mega menu code and need some hover, border radius, and current location styling. This is a work in progress. The current item also uses a small amount of Javascript to account for what I think might be a bug — the aria-current is set on three items simultaneously: the toggle, the parent page, and the child page.

I had to add the ignore-current so that top-level items were not given the background color on desktop.

CSS

%root% .menu-item:not(:last-of-type) {
position: relative;
}
/*  Add animated bar on hover */
@media (min-width:991px) {
%root% .menu-item:not(:last-of-type)::after {
content: "";
width: 0;
height: 2px;
background-color: var(--accent-light); /* USWDS yellow-10v */
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
transition: width 300ms ease-in-out;
}

%root% .menu-item:hover::after {
width: 100%;
}
/* Add border radius on hover */
.menu-item:last-child,
.menu-item:last-child a:hover,
.brx-has-multilevel:last-child .brx-submenu-toggle:hover,
.brx-submenu-toggle:last-child:hover .brx-has-multilevel,li.brxe-dropdown%root%__dropdown--menu.brx-has-multilevel:last-child {
border-bottom-right-radius: var(--radius-xs);
border-bottom-left-radius: var(--radius-xs);
}
  li:has(a.ignore-current) {
    background-color: unset;
    font-weight: unset;
  }
}
/* Add highlight of current parent and page for multilevel dropdown /*/
.current-item,.brx-dropdown-content .brx-submenu-toggle.aria-current {
background-color: var(--primary-light);
font-weight: 700;
}

Current Item JS

// Get all .menu-item elements that contain an <a> with aria-current="page"
const items = Array.from(document.querySelectorAll('.menu-item a[aria-current="page"]')).map(a => a.parentNode);

// Check if there are any qualifying items
if (items.length > 0) {
    // Select the last one from the array
    const lastItem = items[items.length - 1];

    // Add the class 'current-item' to the last item
    lastItem.classList.add('current-item');
}