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

Question

Im developing a navigation menu with jQuery. There I came to the step that can slide down first sub menu and slide right second sub menu. When I mouseout It will fade out. But the problem is when I do the mouse over in the second time. It wont work. First time hover it works fine. I couldn't recognize the problem. I think the mouse out function will not stop or return fully after executing it. Can anyone give me a suggestion for this 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 is here..

Answer 1

Too much code for what you want

Try This Working Fiddle

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

Answer 2

Your problem is the following :

Your boxes begin with a height/width of 0. Then, you make them appear by changing their height/width to the value you want them to be. After that, you use the jQuery function fadeOut which do NOT change either height or width. Then, you remodify the height/width, but in fact, you don't change anything at all because you have already done it the first time, but you do not remove the fadeOut from jQuery.

So I think you have two solutions :

• First one, you change your way of appearing so it can match with the fadeOut function which modify both opacity and display css attributes (change opacity to 1 and display to none)
• Seconde one, you change your way of disappearing, so you remove fadeOut and instead use a custom animation function where you change back your settings to the original one.