[jQuery] Sliding menu elements from under the header

[Bine Gorjanc]

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