Using jQuery to show div in ul on hover but it get's stuck on hide?

So basically I am trying to create a horizontal ul for my site nav. I want a div to appear below each link with a bounce when you hover over it. The animation is working correctly on hover however on mouseout the div doesn't always go away. I am new to jQuery so I'm not sure what I'm doing wrong. Any help very much appreciated!

    //append a div with class blue-hover to all li elements in main-nav
    $('#main-nav li a').append('<div class="blue-hover"><\/div>');

    $('#main-nav li a').hover(

    //Mouseover, show the hidden blue-hover class with a bounce on hover
    function() {

        $(this).children('div').stop(true, true).show().effect( "bounce", 
      {times:1}, 3开发者_如何学C00 );

    },

    //Mouseout, fadeOut the hover class
    function() {

        $(this).children('div').stop(true, true).fadeTo(0,300);   

    });

Don't use "this" when child elements could be involved, if you leave the a element by dragging out over the div, then under some circumstances "this" could be the div and not the a.

Use the currentTarget of the eventObject parameter to the hover leave handler to find the current target given the event bubbling.

ie

  function(ev) {
      $(ev.currentTarget).children('div').stop(true, true).fadeTo(0,300);
     })