Menu hover states

[tannercampbell]

http://50.87.81.92/

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?

Thank,
Tanner

[Paulie_D]

You can’t select a parent element with CSS.

Are you open to a JS solution?

[wolfcry911]

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

[Paulie_D]

Ah…Yes, of course : http://codepen.io/Paulie-D/pen/lGgya

[TheDoc]

Needs some tweaking, but like this: http://codepen.io/anon/pen/Jrfvw

[TheDoc]

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.

[Author]

Posts