jquery hover: mouseout not firing
<p>Here is whats happening (Code Block Below):</p>

<ol>
<li>I am working on a simple drop-down nav (based on nested Ul's).</li>
<li>The Main UL has an ID of #nav.</li>
<li>The hover-> mouseout function does <strong>NOT</strong> fire at all (all browsers)</li>
<li>After the 1st mouseover any <strong>subsequent</strong> mouseovers do <strong>NOT</strong> animate (i.e. slideDown) in Chrome 12.0.742.122, Safari (5.05), Opera (11.50), IE (9.0.8). In fact it <strong>ONLY</strong> seems to work in Firefox (5.0). </li>
<li>I've tested on <strong>Windows</strong> (7) only. No mac...yet.</li>
<li>The only way to get the animations to work again is to <strong>refresh to the page</strong>.</li>
<li>I'm learning this from a <a href="http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/" rel="nofollow">Nettuts tutorial</a> which was posted a little over a year ago, cant believe it's outdated already.</li>
<li>FYI: I'm calling jQuery and the script below at the BOTTOM of my html page.</li>
<li>Another FYI: I'm still <strong>rather green</strong>, so <em>clarity</em> in response would be very helpful</li>
</ol>

<p>Any ideas?
Thanks In Advance,
sleeper</p>

<pre><code>    var site = function(){
       this.navLI = $('#nav &gt; 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('&gt; ul').stop(true, true).slideDown(250);
           }, function(){
               // mouseout
               $(this).find('&gt; ul').stop(true, true).fadeOut(200);
           });
        }
    }

    new site();
</code></pre>
