Lisboa91

E aí galera!

Antes de mais nada, já procurei aqui no fórum e não consegui encontrar algo que pudesse solucionar meu problema.

É o seguinte, eu fiz um menu que contém duas div's, a #menu e a #menu-open.

Quando abro minha página, a #menu está show e a #menu-open está hide. Inseri um mouseover na #menu para chamar a #menu-open em cima dela e um mouseout na #menu-open para voltar a div #menu. Até aí sem problemas.

Porém, dentro da #menu-open, há uma UL e cinco LI com link. Ao passar o mouse em cima dessas LI o #menu-open se comporta como mouseout e some. Na realidade, eu preciso clicar no link antes que a #menu-open suma.

Como faço para resolver isso?

Aqui está meu código.
<script>
$(document).ready(function() {
$("#menu-open").hide();
$("#menu").show(1000);
$('#menu').mouseover(function() {
$("#menu").hide(1000);
$("#menu-open").show(1000);
});
$('#menu-open').mouseout(function() {
$("#menu-open").hide(1000);
$("#menu").show(1000);
});
});
</script>

<div id="menu-open">
<ul>
<li class="pg1"><a href="index.html"><img src="imagens/meio/m-home.png" /></a></li>
<li class="pg2"><a href="empresa.html"><img src="imagens/meio/m-empresa.png" /></a></li>
<li class="pg3"><a href="servicos.html"><img src="imagens/meio/m-servicos.png" /></a></li>
<li class="pg4"><a href="clientes.html"><img src="imagens/meio/m-clientes.png" /></a></li>
<li class="pg5"><a href="contato.html"><img src="imagens/meio/m-contato.png" /></a></li>
</ul>
</div>

Muiiiiito obrigado desde já!