[jQuery] Sliding menu elements from under the header

So i want to make a menu which has links that (atleast seemingly)
slide from under the header when hovering on their footer and retreat
back up on mouseout. At first i though it was easy..
i defined menu element like this (approximately):
<div class="element">
<div class="el_content">
Go home
</div>
<div class="el_footer">
</div>
</div>

with Jquery:

$(document).ready(function(){
$(".element:not(.active) > .el_content").hide();

$(".element:not(.active)").mouseenter(function()
{
$(this).children(".el_content").slideDown('fast');
});
$(".sitelink:not(.active)").mouseleave(function()
{
$(this).children(".el_content").slideUp();
});
});

The theory was that when the elements hide only their footer would be
visible and would therefore be "hanging" from under the header since
"el_content" div's height would be 0.
However there is still space visible where "el_content" div would be
visible. I also tried setting height explicitly to 0 but no effect.

Thank you for any ideas