Menu won't change when hovered in submenu - css

Question

So basically i want to make my menu keep in hover state when their sub menu hovered,
i'd already try like this
but it still won't change as i want, where did i go wrong?
here's my snippet
#topmenu li li:hover a:hover{
color: #000;
text-decoration: none;
background-color: #fff;
text-shadow: 0 0 1px #000;
}
regards,

Answer 1

Not sure why you're hiding your sub menu with left: -999em; rather than display: none;.
Here is an updated jsFiddle: http://jsfiddle.net/JmkaM/1/ that uses display: none; and display: block; to show the sub menu.
What you want to do is display the sub menu when the user hovers a top level li. So you would do that like this li:hover ul. For your specifc CSS modify the following:
#topmenu li ul {
/* left: -999em; remove */
display: none; /* add */
}
/* add the following */
#topmenu li:hover ul {
display: block;
}
If you really need to use left for some reason then do the following:
#topmenu li:hover ul {
left: 0;
}
It will bring your sub menu back from being pushed -999em to the left. Though it might not be placed quite where you want it.
UPDATE 1
This will be the last time I help you. You need to learn that good feedback will help others help you. I understand that you are new but responding to answers with, "doesn't do what I want," does not help us or you.
I'm just guessing here at what you want based on the jsFiddle you linked to in the comments.
Here's the new jsFiddle: http://jsfiddle.net/JmkaM/2/
Below you will see the changes I made, before and after. I only highlighted the properties that I changed for brevity.
Before
#topmenu ul { /* ... */ }
#topmenu li ul {
padding-top: 0px;
padding-bottom: 0px;
}
#topmenu li li:first-child {
margin-top: 14px;
border: 0;
}
AFTER
/* added child selector '>' so only top level navigation
items have a background of red */
#topmenu > ul { }
/* set padding on all sides to 0 */
#topmenu li ul {
padding: 0;
}
/* removed whole rule - #topmenu li li:first-child */
UPDATE 2
Try this:
#topmenu > ul > li:hover {
background-color: white;
}
#topmenu > ul > li:hover > a {
color: black;
}

Answer 2

See this Fiddle :
http://jsfiddle.net/mSNqT/46/
This will be helpful.