One row lights up, the rest step back.
Hovering any row drops every row in the list to 54% and returns the hovered one to full — a relationship the list expresses about its own children with :has(), so no script tracks which item is active. The hovered row also draws a hairline across its top edge and releases its second-level items, each delayed by its index through a --delay custom property.
This browser does not support :has(), so the dimming will not happen. The rest of the menu still works.
The only script here is the keyboard bridge: focus sets aria-expanded so a tabbing user gets exactly the states a pointer user gets. Every visual rule is duplicated for that attribute rather than reimplemented.