This past weekend, I coded an interactive navigation using HTML and CSS (no JavaScript this time):

(click on Rerun at the bottom right corner if you missed the initial animation, or if you want to see it again.)

For this demo:

• I tried to stick to semantic HTML and give an accessible approach (hopefully I didn't mess this part).
• The initial load animation is an animation that only runs once and stays in place after that.
• Uses 3D CSS to make the list elements pop up and back down.
• The focus and hover state are treated equally, so both mouse and keyboard users get a similar experience.
• It has styles for reduced motion that lower the animation and transition speeds, so there's not so much movement (the navigation items will still pop up, but it won't be animated).
• I used the drop-shadow() filter to generate the shadow of the whole menu (independently of the shadows of the menu items).
• Also used box-shadow to add inset shadows to the siblings and provide a bigger sense of depth. I was doing it with outset shadows, but I was running into some trouble, so I may have overcomplicated them a little.
• I used :has() to select the siblings (previous and following) the one that is active and add some depth and shadows to those too.
• It uses Font Awesome for the icons.

Thanks for checking the component. Let me know if you have any questions. All feedback and suggestions are welcome!