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

Home Forums CSS Menu hover states

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #43831

    I’ve been working on this menu all day and I appreciate the few folks who have helped me overcome some of the frustrating hurdles I’ve come across – this forum is full of people much more talented than me.

    I haven’t tried to fix this yet, before I did I wanted to know if it was possible to do what I’m hoping to do.

    As you can see, when you hover over a menu item the button changes to a dark version of itself. My problem is that once you’re not hovering over it any longer it turns back to its original state. Duh, I know, but is there a way to keep its hover state so long as you’re hovering over one of the children in the drop down?



    You can’t select a parent element with CSS.

    Are you open to a JS solution?


    you don’t need a parent selector.
    you need to transfer the hover state from the anchor to the li – that’s what you’re still hovering over when you go down to the children


    Ah…Yes, of course :


    Needs some tweaking, but like this:


    Basically, the `.sub-menu` is actually a *child* of the list item (`.menu-item`). So think of it like a div, it contains all of the elements inside of it (in this case, those elements are an sub menu `

      `, list items `

    • ` and anchors).

      When you hover over `.menu-item` I’ve made it so it’s sub menu (child) appears. When you’re going through its child elements and hovering the nav items that it contains, you’re still technically hovering that main `.menu-item` list item because it is the *container* for all of the things inside of it.

      I think that makes sense?

      > @TheDoc makes an appearance, solves the issue, and vanishes without a trace*. The God Damn Batman of CSS.

      That made my day haha.

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