Menu and Submenu not behaving as expected when hovering erratically
<p>I have a horizontal menu (set out as a list) and when you hover over one of the list items it animates a dropmenu which is a child of the list item.</p>

<p>This works fine if you move the cursor over the menu at a "normal" speed. The problem I have is the behaviour of the menu if you erratically move the cursor over the menu. It leaves previously hovered elements shown still and I have to hover over and out of the dropMenu until they all return to their initial state (height:0). </p>

<p>My jquery for the menu is below:</p>

<pre><code>$('#templateNav &gt; ul &gt; li').bind({
        mouseenter: function() {
            $(this).find(".dropMenu").clearQueue().animate({
                height: 250
            }, 200);
        },

        mouseleave: function() {
            $(this).find(".dropMenu").clearQueue().height(0);
        }
    });
</code></pre>

<p>And here's an example of my menu code:</p>

<pre><code>&lt;div id='templateNav'&gt;
    &lt;ul&gt;
        &lt;li&gt;Menu 1&lt;span class='dropMenu'&gt;...&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;Menu 2&lt;span class='dropMenu'&gt;...&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;Menu 3&lt;span class='dropMenu'&gt;...&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Any ideas?</p>
