jQuery navigation menu mouseover and mouseout second time doesn't work -

im developing navigation menu jquery. there came step can slide down first sub menu , slide right second sub menu. when mouseout fade out. problem when mouse on in second time. wont work. first time hover works fine. couldn't recognize problem. think mouse out function not stop or return after executing it. can give me suggestion problem

my jquery code

  <script type="text/javascript">        $(document).ready( function() {            jquery('.box1').mouseover(function() {             ///$(".box2").stop().slidedown('slow');                 $('.box2').stop().animate({                    height: 50                 }, 1000);             });              jquery('.box1').mouseout(function() {                $('.box2').stop().fadeout();                // $(".box2").stop().slideup('slow');             });                jquery('.box4').mouseover(function() {               // $(".box3").stop().slidedown('slow');               //$(".box3").show('slide', {direction: 'left'}, 800);                $('.box3').stop().animate({                      width: 200                   }, 1000);           });            jquery('.box4').mouseout(function() {               //$(".box3").stop().slideup('slow');               // $(".box3").hide('slide', {direction: 'left'}, 800);               $('.box3').stop().fadeout();           });           });    </script> 

my html code

<ul >   <li class="box1"  >     <div  class="box_sub" >home</div>     <ul>       <li style="float:left;" class="box4"   >         <div  id="box2" class="box2"  style="float:left">sub 1.0</div>         <ul style="float:left;">           <li id="box3" class="box3"  style="float:left;clear:none;"  > sub sub 1.1</li>         </ul>       </li>     </ul>   </li> </ul> 

my css code

    .box_sub {         width: 200px;        height: 50px;        background-color: #0066cc;        color: #fff;        text-align: center;         line-height: 50px;        font: verdana, geneva, sans-serif;        font-size: 14px;        padding-top: 20px;        padding-bottom: 20px;        cursor: pointer;     }     .box2 {        width: 200px;        height: 0px;        background-color: #0066cc;        color: #fff;        text-align: center;         line-height: 50px;        font: verdana, geneva, sans-serif;        font-size: 14px;        cursor: pointer;      }    .box3 {        width: 0px;        height: 50px;        background-color: #0066cc;        color: #fff;        text-align: center;         line-height: 50px;        font: verdana, geneva, sans-serif;        font-size: 14px;        padding-top: 20px;        padding-bottom: 20px;        cursor: pointer;     }    .box1 {        min-width: 200px;    }    ul {        list-style: none;    }    ul {       margin: 0;       padding: 0;    }    li {       margin: 0;       padding: 0;    } 

my jsfiddle link here..

too code want

try working fiddle

$("#nav li").hover(     function(){         $(this).children('ul').hide();         $(this).children('ul').slidedown('slow');     },     function () {         $('ul', this).slideup('slow');                 });