help with menus.....sub menu fades in with main menu....help? css3

See more:

Javascript

CSS

menu

this is my css.

.navigation .item a.active{
    background-position:0px -52px;
}
.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}
.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.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{
    background-color:#fff;
    color:#444;
    -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;
    position: absolute;
    left: 110px;
    top: 0;
    display: block;
    }

and this is my html where it gets appplied...the main menu

<div id="content">
          <div class="navigation" id="nav">
            <div class="item user">
                    &lt;img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/&gt;
                    <a href="#" class="icon"></a>
                    <h2>Sign In</h2>
                    <ul>
                        <li><a href="#">Like Us</a></li>
                        <li><a href="#">Share</a>
                    <ul id="static" class="static">
                    <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>
</div></div>

and with this im using the jquery fade in effect::

<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>

every thing works fine but ... when i hover over the main menu item the sub menu items also get faded in and displayed>>>in an awkward manner and when i hover over the sub menu item it dissapears and gets to its original sub sub menu place,,,,how do i solve this>>>i dont want the sub menu to appear in main menu items..i knw im addind or missing smething.plz help for demo click here