Jquery "Droppy" drop-down menu - not hiding properly on mouseout
<p>I have a drop down menu that I am happy with, but... It does not properly hide the appropriate sub menus if you mouse out while a sub menu is active.</p>

<p>It will hide initially, but when you try to use the menu again, it is buggy. I know its because its not properly hiding in the first place. An idea I had was to 'reset' the menu every time it is initialized.</p>

<blockquote>
  <p><a href="http://jsfiddle.net/YmaAE/" rel="nofollow">http://jsfiddle.net/YmaAE/</a></p>
</blockquote>

<p>I think it may have to do with the <strong>hide</strong> function which ive already messed around with a lot:</p>

<pre><code>function hide() {
    var subnav = getSubnav(this);
    if (!subnav) return;
    $.data(subnav, 'cancelHide', false);
    setTimeout(function() {
        if (!$.data(subnav, 'cancelHide')) {
            $(subnav).hide("fast");
        }
    }, 500);
};
</code></pre>
