Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Transitions Stuck On Drop Down Menus

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #148689
    Tom Houy
    Participant

    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.

    #148692
    Paulie_D
    Member

    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?

    #148694
    Tom Houy
    Participant

    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.

    #148695
    Paulie_D
    Member

    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 {
    }
    
    #148700
    Tom Houy
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.