用jquery实现二级菜单淡入问题

我想要用jquery实现鼠标移动到一级菜单的时候，二级菜单中的内容一层层慢慢淡入，
而不是直接一起淡入（在二级ul上fadeIn就是全部一起淡入），我尝试在二级菜单的每个li进行fadeIn（注释掉部分），但是不行，为什么呢》

 <script>
        $(document).ready(function(){
            $('.menu1').hover(
                    function(){
                        $('.menu1 ul').fadeIn();
                        /*$('#2').fadeIn('slow');
                        $('#3').fadeIn(3000);*/
                    },
                    function(){
                        $('.menu1 ul').fadeOut();
                    }
                );
        });
    </script>

<ul class="clearfix">
                        <li class="menu1"><a href="#">服装</a>
                            <ul>
                                <li id="1"><a href="#">女装</a></li>
                                <li id="2"><a href="#">男装</a></li>
                                <li id="3"><a href="#">童装</a></li>
                            </ul>
                        </li>
</ul>