- This topic is empty.
-
AuthorPosts
-
September 1, 2013 at 12:36 am #148689
Tom Houy
ParticipantI 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.
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.
September 1, 2013 at 5:42 am #148692Paulie_D
MemberI’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?
September 1, 2013 at 5:48 am #148694Tom Houy
ParticipantPer the suggestion on this thread ;)
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.
September 1, 2013 at 5:50 am #148695Paulie_D
MemberRather 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 { }
September 1, 2013 at 6:02 am #148700Tom Houy
ParticipantLOL, 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.