The Setup

I wanted to add a Videos section on my website, to link the videos that I’ve been doing, and hopefully will continue doing. But once I did, I realized that the space for mobiles was going to be a bit constrained. So time to do some funky dropdown, all on CSS because don’t want any JS on my site.

The Solution

So I found that CSS added a selector/pseudo-class called :focus-within. Perfect. Add some work with transformations, opacity, and visibility to create a nice smooth transition (he says with no clue whatsoever).

But, my phone is an iOS. And I found out that :focus-within doesn’t just work.

The Other Solution

Stack overflow came to the rescue, thanks to user Charlie, this seems to be the answer. Adding tabindex=0 to the elements (span and a in my case) iOS seems to respond to the touch. Very strange. I’m gonna have to investigate the why. But wanted to have this one out for future reference for myself.