PLZ help ...this is my html menu

> <div id="content">   <div
> class="navigation" id="nav">
>     <div class="item user">
>             <img src="images/bg_user.png" alt=""
> width="199" height="199"
> class="circle"/>
>             <a href="#" class="icon"></a>
>             <h2>Sign In</h2>
>             <ul>
>             <li><a href="#">Like Us</a></li>
>             <li><a href="#">Share</a>
>             <ul id="menu">
>             <li><a href="#">mother</a></li>
>             <li><a href="#">father</a></li>
>             <li><a href="#">brother</a></li>
>             <li><a href="#">sister</a></li>
>             <li><a href="#">couzin</a></li>
>             <li><a href="#">uncle</a></li>
>             </ul>
>  
>                 </li>
>                 <li><a href="#">Tell</a></li>
>             </ul>
>       </div

and this is my css for my menu:

}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#424242;
    color:#fff;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}
.item li:hover ul, li.over ul{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    position:absolute;
    left: 110px;
    top: 0;
    display: none;
    }

the thing is that im using a javascript to fade in main menu items but the sub menu items also fade in with the main menu making it awkard...i want the sub menu items to appear when mouse hovered over the main menu items. and yes here is the javascript:

    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#nav > div').hover(
            function () {
                var $this = $(this);
                $this.find('img').stop().animate({
                    'width'     :'199px',
                    'height'    :'199px',
                    'top'       :'-25px',
                    'left'      :'-25px',
                    'opacity'   :'1.0'
                },500,'easeOutBack',function(){
                    $(this).parent().find('ul').fadeIn(700);
                });
                $this.find('a:first,h2').addClass('active');
            },
            function () {
                var $this = $(this);
                $this.find('ul').fadeOut(500);
                $this.find('img').stop().animate({
                    'width'     :'52px',
                    'height'    :'52px',
                    'top'       :'0px',
                    'left'      :'0px',
                    'opacity'   :'0.1'
                },5000,'easeOutBack');
                $this.find('a:first,h2').removeClass('active');
            }
        );
        });
    </script>

ANY help wud be Much Appreciated. Thanks in advance......Smile | :)