1

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.

Ian
  • 5,704
  • 6
  • 40
  • 72
  • I don't see how you can do it without some sort of javascript. Because you are technically hovering over all of the selected buttons and technically clicking all of them, since they have the same class. Maybe split up the classes between levels? – tedski Mar 01 '12 at 15:53
  • Don't put your transitions on .anibutton then. All the parents have the class so they all get the transition. Apply it to the contents (which you will need to wrap) instead. – mrtsherman Mar 01 '12 at 15:59
  • I was trying to make a code that anybody could easily use, but if I have to make each level in the list a different class (to style them and control the showing and hiding), that would get a lot more complicated. Also, I don't think it would work. I have looked at other drop-down menu CSS codes, and they definitely don't have my problem. I just can't figure out why. – Ian Mar 02 '12 at 02:46

1 Answers1

0

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!

brains911
  • 1,310
  • 7
  • 5
  • Thanks! I need the span to make the text move. I will definitely be using that. – Ian Mar 02 '12 at 14:51