Question

Here is whats happening (Code Block Below):

1. I am working on a simple drop-down nav (based on nested Ul’s).
2. The Main UL has an ID of #nav.
3. The hover-> mouseout function does NOT fire at all (all browsers)
4. After the 1st mouseover any subsequent mouseovers do NOT animate (i.e. slideDown) in Chrome 12.0.742.122, Safari (5.05), Opera (11.50), IE (9.0.8). In fact it ONLY seems to work in Firefox (5.0).
5. I’ve tested on Windows (7) only. No mac…yet.
6. The only way to get the animations to work again is to refresh to the page.
7. I’m learning this from a Nettuts tutorial which was posted a little over a year ago, cant believe it’s outdated already.
8. FYI: I’m calling jQuery and the script below at the BOTTOM of my html page.
9. Another FYI: I’m still rather green, so clarity in response would be very helpful

Any ideas?
Thanks In Advance,
sleeper

    var site = function(){
       this.navLI = $('#nav > li').children('ul').css('display','none').end();
       this.init();
    };

    site.prototype = {
       init: function(){
          this.setMenu();
       },

    // enables the slide down menu and adds support for ie6
        setMenu: function(){
           this.navLI.hover(function(){
               // mouseover
               $(this).find('> ul').stop(true, true).slideDown(250);
           }, function(){
               // mouseout
               $(this).find('> ul').stop(true, true).fadeOut(200);
           });
        }
    }

    new site();

Answer 1

You didn’t need the display: none in your CSS for your ul elements. Check out this updated fiddle and you’ll see the desired effect.