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

Answer 1

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 :-)

Answer 2

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

#menuh li:hover A
{
}

(Dito for all a:hover s)

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

Answer 3

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;   }