How to make a parent object in CSS menu stay in hover state when children are hovered over

Question

I'm trying to make a menu work so that the menu remains in hover state when it's submenu/child menu is selected:

see example here: http://cssdesk.com/5vJP6

If anyone could explain what needs to be added to the CSS to make this work that would be great. I don't want to use any external javascript to make this happen!

I've had a look at a couple of similar questions here, but none of their answers worked for me

thanks

I'd put the class (top_parent) on the list item instead of the link — kalpaitch, Sep 01 '11 at 12:30
@kalpaitch - could you expand on that please? (or paste it somewhere?) — falter, Sep 01 '11 at 15:50
this isn't my website. it has many drop down menus that works across all the browsers, you can see which ever fits your requirements. — Atul Gupta, Sep 02 '11 at 07:23

score 3 · Accepted Answer · answered Sep 02 '11 at 11:13

3

I added this:

#menuh ul li:hover a  {color: black !important; border-bottom: 1px dashed #C1D9F0 !important;   }
#menuh ul li:hover li a {color: #505050 !important;}
#menuh ul li:hover li a:hover   {color:  #297BB6 !important;  }

Which resolved my problem :-)

answered Sep 02 '11 at 11:13

falter

13,584
5
22
23

1

You could also use `#menuh > ul > li:hover a`, however that is not supported by IE6. – RoToRa Sep 02 '11 at 14:50

score 2 · Answer 2 · answered Sep 01 '11 at 13:15

2

Define the :hover on the li element instead of the link, for example:

#menuh li:hover A
{
}

(Dito for all a:hovers)

However this won't work in IE6. You'll need to have to JavaScript solution there.

answered Sep 01 '11 at 13:15

RoToRa

37,635
12
69
105

Thanks this has helped - however it seems to have taken over the hover styles of each of the list items (they used to have blue backgrounds before adding rows 113-120) - how would I go about making them different again? – falter Sep 01 '11 at 15:12

score 1 · Answer 3 · answered May 22 '13 at 20:26

This was super helpful! Here's what I ended up using to make sure the background and font color of my main nav didn't override the sub nav

#nav ul li:hover a  {background-color: #353535; color: #A98C0C;}
#nav ul li:hover li a {background:none; color: #aaa; }
#nav ul li:hover li a:hover   {background:none; color: #fff;   }

How to make a parent object in CSS menu stay in hover state when children are hovered over

3 Answers3

Linked