The color of a parent link in menu when sub-pages are hovered over

[RobCubbon]

Hi,
I think there's no way of doing this in CSS but I would like someone's opinion/input.

Say you have a menu like the one in the header widget here: http://www.crea8ivedesigns.com/

This menu's links have two background colors : one for the normal state and one for the hover state.

But, on this menu, one of the links "Portfolio" has a drop down with two child or sub-pages. How can you make the parent "Portfolio" link be a certain color when you hover off it on to the sub menu? This would be nice to do so it would look like the pages are all connected.

However, to do this you would have to get an element to change it's behavior when another element is hovered over and I'm not sure that's possible in CSS?

I hope I have explained that OK.

---

Rob Cubbon

http://www.crea8ivedesigns.com/

[ramseyp]

Hi Rob,

This selector should work for you:

`.genesis-nav-menu li.sfHover a.sf-with-ul`

Add that to your CSS where you've got the hover states and the parent menu link should stay in "hover" state while you're in the sub menu.

---

Community • Work • Conversations

[RobCubbon]

Hi Ramsey, that works! Thank you so much.

I don't know how this works but I guess it's something to do with Suckerfish – hence the "sf"

Amazing the things you can do that you think you can't do.

---

Rob Cubbon

[Author]

Posts