Jquery slideDown() not working as expected

Question

I found a script that will work on my project, but wondering why the slideDown doesnt work as expected. Im just a newbie hoping someone could help,. Thanks!

function hideAllCat() {

    $("#categories").hide();

 }
hideAllCat();

$("#tab50").mouseover(function(){            
    hideAllCat();
  $("#categories").slideDown();

});
  $("#categories").mouseleave(function() {
    hideAllCat();
});

http://jsfiddle.net/G5RtR/21/

Answer 1

I have traced your issue to the postition:absolute on the #categories > ul CSS rule. I believe it was causing the #categories div to not have a height causing the slideDown function to therefore not have what it needed to perform the required calculation for the actual animation.

I changed your CSS rule as follows:

#categories > ul {
    font-family: sans-serif;
    font-size: 15px;
    background: lightgrey;
    width: 200px;
    left: 0px;
    list-style-type: none;
    padding: 0;
}

http://jsfiddle.net/G5RtR/23/