How to fix this inconsistent dropdown toggle when i move mouse too fast?
<p>I made the following code to expand menu when mouse is over the LI item, and hide menu when mouse leaves the LI.</p>

<pre><code>$('.sort').bind('mouseenter',function(){
    $('.options').slideDown('slow');
}).bind('mouseleave',function(){
    $('.options').fadeOut('fast');
});
</code></pre>

<p>.sort is the class of li item. .options is the children UL. The code works fine as when I move mouse over the list item it expands the menu, and when i leave the item, it fades out. But I get inconsistent toggling/fading if i move mouse too quick over and in the item. It creates an infiniate fade/toggle how to fix it?</p>

<p>Sorry guys, the HTML:</p>

<pre><code>        &lt;ul id="options"&gt;
            &lt;li class="sort"&gt;&lt;a href="#" class="sort-link"&gt;&lt;?php _e('Shop by Brand','onecart'); ?&gt;&lt;/a&gt;
                &lt;ul class="options"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Latest Arrivals&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;For Men&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;For Women&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;For Kids&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;On Sale&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
</code></pre>

<p>the css:</p>

<pre><code>#options li.sort {
    position: relative;
    padding: 0 0 8px 0;
}
#options li.sort .sort-link {
    display: block;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    color: #686868;
    text-transform: uppercase;
    text-shadow: 0 1px #eee;
    background: url(../img/arrow-list.png) no-repeat right top;
    padding: 0 16px 0 0;
}
#options li.sort .sort-link:hover {color: #000}
#options li.sort .current {
    color: #000;
    background-position: right bottom;
}

ul.options {
    display: none;
    position: absolute;
    background: #fff;
    top: 36px;
    left: 0;
    width: 180px;
    padding: 6px 0;
    border-top: 3px solid #ea6ea0;
    box-shadow: 0 1px 2px #aaa;
    z-index: 4;
}
</code></pre>
