[Resolvido] Menu drop-down

Boa noite a todos,

Então galera, to com uma dúvida e preciso da ajuda de você's >.< http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Estou criando um menu horizontal com sub-itens.

O menu na sua forma inicial é assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img509.imageshack.us/img509/152/semttulorea.png&key=dc5fb357aad667906811f27ab667b4f4804a94660305b786ef271858ab76a3b3" alt="Imagem Postada" />

E quando passa o mouse sobre o item "Desenvolvimento" (por exemplo), fica da seguinte maneira:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img168.imageshack.us/img168/1540/semttulopno.png&key=b66610b3480fe5dbcf8a0dadac45fc8adf5fd2adfaa5b41bb638e2e46b85762e" alt="Imagem Postada" />

Mas quando passa o mouse sobre um sub-item, como por exemplo, no sub-item "Ajax", fica da seguinte maneira:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img706.imageshack.us/img706/4425/semttulonbl.png&key=cb83df6ce4c1f2216f219201fc36603fe20d4381267fac266c830105d86ae0dc" alt="Imagem Postada" />

O problema é que, quando o mouse sai de cima da categoria (Desenvolvimento), ele tira o BG =\

Queria que quando o mouse ficasse sobre uma sub-categoria, a categoria ainda continuasse com o BG azul marinho.

Queria que ficasse igual o menu deste site: http://www.mxmasters.com.br/

Resumindamente, o HTML do menu esta assim:

<div id="menu">
	<ul>
 <li><a href="#">Início</a></li>

 <li><a href="#">Criação</a>
 <ul>
 <li><a href="#" title="Ver todos os posts arquivados em Fireworks">Fireworks</a></li>
 <li><a href="#" title="Ver todos os posts arquivados em Photoshop">Photoshop</a></li>
 </ul>
 </li>

 <li><a href="#">Desenvolvimento</a>
 <ul>
 <li><a href="#">Ajax</a>
 <ul>
 <li><a href="#">jQuery</a>	</li>
 </ul>
 </li>
 <li><a href="#">Dreamweaver</a></li>
 </ul>
 </li>
	</ul>
</div> <!-- FIM # DIV "menu" -->

E o CSS do menu:

#menu ul, #menu ul ul { height: 40px; margin-top: 8px; list-style-type: none; line-height: 30px; }
#menu ul a { padding: 0px 15px; font-size: 14px; text-decoration: none; display: block; }
#menu ul a:hover { background: #122D71; color: #FFF; }
#menu ul li { position: relative; float: left; }
#menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul { display: none; }
#menu ul li:hover ul, #menu ul li li:hover ul, #menu ul li li li:hover ul, #menu ul li li li li:hover ul { display: block; }
#menu ul li ul a { min-width: 175px; height: auto; background: #CCC; float: left; color: #122D71; }
#menu ul li ul ul { left: 195px; margin: 0 0 0 10px; background: #CCC; }
#menu ul ul { min-width: 175px; height: auto; font-size: 10px; position: absolute; top: 22px; display: none; }
#menu ul ul ul { top: auto; background: #CCC; }

E também tem um código em jQuery que serve para da um efeito'zinho legal, tipo um "fade" quando é exibido as sub-categorias:

$(document).ready(function ()
	{
	// MENU
	$("ul ul").css({display: "none"});
	$("ul li").hover
 (
 function()
 {
 $(this).find('ul:first').css({visibility: "visible", display: "none"}).show(200);
 },
 function()
 {
 $(this).find('ul:first').css({visibility: "hidden"});
 }
 );
	});

É isso ai galera, espero pela ajuda de você's.

MUITO obrigado,

Anderson Ferreira