After reading a recent article on CSS tricks about clickable navigation menus, my inner contrarian was no doubt tempted to explore the opposite.

I’ve been using the CSS “opacity and visibility” trick for smooth two-way transitions for quite some time. Works great in a pinch, except hover-only dropdown menus are not very accessible. Typically I would have to enhance them further with some JavaScript in order to be able to move the focus properly through the nested dropdown menus.

With the :focus-within psuedo selector, however, JavaScript is no longer necessary! It’s current browser support is fairly wide, implemented by most modern browsers and Internet Explorer 11 and up.

Go ahead and try to tab through the below menu yourself. Works like a charm!

Bonus!

And if you like drop shadows on your submenus, the example in this post includes a simple hack to prevent the shadows on child submenus from overlapping their parent submenus.