如何在jquery中实现实际的滑动效果？

Question

我在这里制作一个菜单 http://jsfiddle.net/BGV2Z/14/

    $("li").on('mouseenter', function () {

        $(this).find('ul').first().css('display', 'none').slideDown(500, function () {

            $(this).css('display', 'block');

        });

    }).on('mouseleave', function () {

        $(this).find('ul').first().slideUp(500, function () {

            $(this).css('display', 'none');

        });
    });

并且它工作正常，我的问题是slideUP / slideDown动画只是来回地增长ul元素。我在追求的是这里

http://www.joomlatemplates.youjoomla.info/yougrids/

将鼠标悬停在最后3个顶级菜单项上。

感谢任何帮助。谢谢！