Fix submenu.hidden / CSS :hover+:focus-within conflict in menu

[coderabbitai]

Problem

In main/menu.js, the closeAllSubmenus() method closes submenus by setting submenu.hidden = true and item.setAttribute('aria-expanded', 'false'). However, style.css still has CSS rules that force submenus open via .menu-item:hover and .menu-item:focus-within. After focus returns to the parent item, the submenu can remain visible even though the JS state says it is closed.

Suggested Fix

One or more of the following approaches should be applied:

1. Add a CSS rule to ensure [hidden] always wins:

   .submenu[hidden] {
     display: none !important;
   }

2. In closeAllSubmenus() (and any other single-submenu close paths), call item.blur() or move focus to a neutral element (e.g. document.body) so :focus-within does not re-open the submenu.
3. Clear currentOpenSubmenu in all relevant close paths.

Affected Files

• main/menu.js — closeAllSubmenus() method (around lines 112–120)
• style.css — .menu-item:hover .submenu / .menu-item:focus-within .submenu rules

References

• PR Tidy index #409: Tidy index #409
• Review comment: Tidy index #409 (comment)

Raised by @lawsie.