horizantal menu slide up and down using jquery

<script type="text/javascript">
$(document).ready(function(){

    $(".box-category").children("ul").hide(); //hides the lists when documents loads


    $(".box-category").hover(
        function(){//onmouseover
            $(this).children("ul").slideDown();
        },
        function(){//onmouseout
            $(this).children("ul").slideUp();
    });
});
</script>

note:-

class name=>  $(".box-category");
id=> $("#box-category");