Question

I have a project that I am working on for some simple CSS buttons, and I was trying to make a matching drop-down menu for them. The problem is that when I click an item in a sub-menu, all the parents above it go to the active state as well. I was going to use a parent selector, only they don’t exist. Here is the demo page: http://jsfiddle.net/td7bk/4/.

Thanks!

Edit: For now, the demo is only fully compatible with Firefox, because it uses the -moz-transition and -moz-box-shadow property, and the border-radius property.

Answer 1

This is possible with just css if you are willing/able to adjust your html a tiny bit. I noticed you have a span tag wrapping text in a few li elements but not all of them so i wasn’t sure if this was a requirement or not.

See http://jsfiddle.net/td7bk/8/ for an example.

Also, if you’re in the mood for a quick tip, take a look at the adjusted css selectors. Simplified and more efficient.

Hope this helps!