Problema com DIV

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!