WordPress submenu hover with gradient image background over the parent LI and children LI's (submenu UL)

I have the next situation/menu: http://inturnets.com/test/

It is a WordPress generated menu structure.

Please hover your mouse over "Menu #1". When mouse is hovered, i need the Menu #1, Menu #1 - 1 and Menu #1 - 2 to look like http://inturnets.com/test/images/whatineed.jpg

It has a that background image with gradient effect on it. It should start from the top of the menu when hovered, from the top of Menu #1 and to end on the LI's of the submenu UL. When the bg image ends (no-repeat) should continue the colour from the last pixel of it's bottom. In our example for a better visual experience let's take the #ff0000 :)

Does anyone have any clue how to solve that?

For now I tried the next css code:

#menu-top-navigation ul:hover { background: url(images/bg-menutest.jpg) repeat-x center top; }

But as you can see, with this only the LI's are covered on hover. I mean the submenu UL. I think there we need a hover rule for the hovered LI, some rounded corners with radius and another hover rule for the submenu UL with a corner radius and to look with continuity from the top over the botto开发者_如何学Pythonm, like it looks on the linked image.

try to specify background color with selector like this:

#menu-top-navigation > li:hover 

This way, you should be able to specify one gradient for whole LI content (in your case UL and LI). Strongly reccomend to use CSS3 gradients.

If this wont help you might need to specify on gradient for

#menu-top-navigation > li:hover {gradient color of XXX to YYY}

and one for

#menu-top-navigation > li:hover > ul {gradient color of YYY to ZZZ}

Note: gradient spec is just an example, it is not the actual syntax. Just wanted to make easier to understand.

Let me know if you have any questions.