Jquery: menu retrátil fecha sem tirar o mouse de cima da <div>

Olá pessoal,

Estou criando um menu retrátil com Jquery. Nele o visitante passa o mouse sobre o item e surgem as sub-categoriais, bem básico. Mas mesmo quando estou com o mouse está em cima, ele fecha. Este é o código:

Javascript:

$(document).ready(function() {
 $("a#venda").hover(function() {
 $("div#venda").animate({height: "120px"});
 });
 $("div.submenu").mouseout(function(){
 $("div#venda").stop().animate({height: "0px"});
 });
});

CSS:

div#venda{ width: 200px; height: 0px; float: left; background: #FFFFFF; margin: -10px 0px; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); overflow:hidden;}
div#venda ul{margin-top: 0px}
div#venda li { border-bottom: 1px solid #efefef; text-align: left; padding: 10px; display: block; margin-left: -40px;}
div#venda a{ font: 14px "Roboto", Arial, Helvetica }
Estou fazendo isso com o height porque com o show()/hide() também não deu certo.

Tirei um print.

Valeu!