Transitions Stuck On Drop Down Menus

[Tom Houy]

I am trying out a different method of creating hover transitions on menu elements, but I am noticing that the parent menu elements are getting “stuck” in their hover state as you drill down a few levels deep on the drop down menus.

http://cdpn.io/klHIj

I’m using a “:before” pseudo class on the LI’s to create a box that’s styled with a CSS gradient, then applying a CSS transition on the opacity of it to make it appear/disappear on Hover. I would like the upper level parent buttons to return back to their original state when I am mousing over a sub menu. Right now it appears all the parent level buttons that the submenu is related to are all still remaining in a Hover state.

Any ideas on how to prevent this? Are my transitions assigned incorrectly? Something I could change with the child selectors? Any help would be greatly appreciated.

[Paulie_D]

I’m using a “:before” pseudo class on the LI’s to create a box that’s styled with a CSS gradient

That sounds very complicated…is there a reason why you need a pseudo element?

[Tom Houy]

Per the suggestion on this thread ;)

https://css-tricks.com/forums/topic/best-method-for-using-css-transitions-to-fade-a-background-image/

It works, as far as being able to use css transitions to fade the backgrounds. But I guess since the LI elements are all nested within each other, the Hover effect is being applied to all of them.

[Paulie_D]

Rather than all those deep selectors why not try just giving each menu level it’s own class…then you can easily identify them and style them independently.

I mean this is a bit much

.mymenu ul li ul li ul li ul {
}

[Tom Houy]

LOL, I’ve been working on this in Dreamweaver and using their selection tools, which can sometimes get really specific like that.

I guess what I was trying to accomplish was some sort of ascending CSS selector, which from what I’m reading isn’t possible with CSS alone – but could possibly be done with some extra javascript. I may just leave it as is for now, to keep it pure CSS.

[Author]

Posts