Problema com DIV

[BrunoJavan 3]

Boa noite, estou com um probleminha com uma página que estou criando aqui.

 

Na página, existe um menu horizontal com alguns botões (feitos com imagens), sendo que o ultimo botão não tem ação, simplesmente quando você passa o mouse em cima dele aparece uma DIV com todas as categorias do site.

 

O problema é que, quando eu tiro o cursos de cima do botão para então clicar em alguma categoria a DIV some, e eu gostaria que ela sumisse apenas se eu retirasse o mouse de cima dela e não somente do botão, entendem?

 

Abaixo o script que usei:

<script>
			function mostraLayer(obj){
				var div = document.getElementById(obj).style;
				div.display = "block";
			}

			function escondeLayer(obj){
				var div = document.getElementById(obj).style;
				div.display = "none";
			}
</script>

 

DIV do botão:

 

<div id="allcat"><a href="#" onmouseover="mostraLayer('allcatcontent');" onmouseout="escondeLayer('allcatcontent');"><img src="../imagens/allcat1.png" border="0" onmouseover="this.src='../imagens/allcat2.png'" onmouseout="this.src='../imagens/allcat1.png'" alt="compras"></a>
  </div>

 

DIV "escondida":

<div id="allcatcontent" style="display:none;">

CONTEUDO DA DIV

</div>

O que eu posso fazer para resolver isso? Tenho que usar um script diferente, ou alterar o que eu estou usando?

 

Por favor me ajudem!

[Marcos Xavier 189]

Fiz um teste rápido aqui

Alterei o HTML para :

 

    <div id="allcat" onmouseover="mostraLayer('allcatcontent');" onmouseout="escondeLayer('allcatcontent');">
    <a href="#" >Comprar
    <img src="../imagens/allcat1.png" border="0" onmouseover="this.src='../imagens/allcat2.png'" onmouseout="this.src='../imagens/allcat1.png'" alt="compras">
    </a>
     <div id="allcatcontent" style="display:none;">
     
    CONTEUDO DA DIV<br />     
    </div>
    </div>