[Resolvido] Trocar Background apenas na <li> do elemento

Bom dia pessoal,

novamente, mesmo layout, novos problemas, hoje o que está acontecendo é o seguinte, tenho um menu drop-down, fiz ele com jQuery do Zero, porém o mesmo possui alguns erros que não consigo resolver, vejam a descrição do problema:

Ao passar o Mouse sobre a <li> do elemento pai:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/menu-hover.jpg&key=ae7adba01cc7e23229e0227f0380ba605229e24d7391e0c64456d97b402140d2" alt="menu-hover.jpg" />

Ao passar o Mouse sobre as <li> do elemento filho:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/menu-hover2.jpg&key=ac0f6729e61a15c1f88133f05f7cec7bb5e5f030be439e6db789b887a5fc16f3" alt="menu-hover2.jpg" />

*(A <li> do elemento pai perde o efeito css ul li:hover)*

 

O que eu preciso: Ao tirar o mouse da <li> do elemento pai e comecar a passar sobre as <li> filhas, o background da <li> pai continuar branca (Fica branca com CSS ul li:hover { /* CSS aqui */ })

Vejam como está o meu código:

HTML:

<div id="menu">
 <ul class="itens-menu">
 <li><a href="index.html" title="Página Inicial" class="home"><img src="imagens/home-mini.png" alt="Página Inicial" /> Página Inicial</a></li>
 <li>
 <a href="interna.html" title="Consulta" class="consulta"><img src="imagens/consulta-mini.png" alt="Consulta" /> Consulta</a>
 <ul>
 <li><a href="interna.html" title="Fórum">Sub-menu 1</a></li>
 <li><a href="interna.html" title="Fórum">Mais um menu</a></li>
 <li><a href="interna.html" title="Fórum">Outro Sub-menu </a></li>
 <li><a href="interna.html" title="Fórum">Sub-menu 4</a></li>
 </ul>
 </li>
 <li><a href="interna.html" title="Fórum" class="forum"><img src="imagens/forum-mini.png" alt="Fórum" /> Fórum</a></li>
 <li><a href="interna.html" title="Eventos" class="eventos"><img src="imagens/eventos-mini.png" alt="Eventos" /> Eventos</a></li>
 <li><a href="interna.html" title="Multimídia" class="multimidia"><img src="imagens/multimidia-mini.png" alt="Multimídia" /> Multimídia</a></li>
 <li><a href="interna.html" title="Sistemas" class="sistemas"><img src="imagens/sistemas-mini.png" alt="Sistemas" /> Sistemas</a></li>
 </ul>
 </div>

CSS:

#menu{
 margin: -11px auto 0 auto;
 width: 1024px;
 height: 35px;
 padding: 0 0 0 0;
}

#menu ul{

 list-style: none;
 position:relative;
 z-index:2;
}

#menu ul li{

 display: inline;
 cursor: pointer;
 margin: 0 0 0 0;
 list-style: none;
 float:left;
}

#menu ul li a{

 display:block;
 color: #FFFFFF;
 float:left;
 padding: 10px 15px 0 15px;
 margin: 0 0 0 0;
 height:26px;
}

#menu ul a:hover{ color: #1C5A8C; background: url('../imagens/menu-bg-hover.jpg') repeat-x;}
#menu ul .home img{ float:left; margin: 3px 6px 0 0;}

/ Sub-menu /
#menu ul li ul{

 top:35px;
 width: 150px;
 padding: 0 0 0 0;
 margin: 0 0 0 0;
 background-color: #EBEBEB;
 border:solid 1px #E2E2E2;
 float:left;
 position:absolute;
 z-index:1;
}

#menu ul li ul li{

 float:none;
 background: url('../imagens/menu-bg-hover.jpg') repeat-x;
 display:block;
 width: 150px;
}

#menu ul li ul li a{

 color: #1B598C;
 width: 120px;
}

JavaScript:

/ Menu Principal /

 $("#menu ul li ul").hide();
 $("#menu ul li").hover(
function(){
 $(this).find("ul:first").slideDown("slow");

 },
function(){
 $(this).find("ul:first").slideUp("slow");

 }
 );

Se alguem conseguir me ajudar nessa solução ficaria muito grato.

Att.