How can I prevent a jquery animation from firing when a selectbox is active
<p>The following jsfiddle demonstrates the problem. In Firefox, hover over 'highlight stories' and try to select from the second drop-down: the containing ul animates closed and it is impossible to select an option. It is also possible to get into a flickering loop by selecting from the top select box and moving the mouse down slightly.</p>

<p>I can remove the mouseleave event by doing something like this:</p>

<pre><code>$('.selector').click(function(){
      $('nav ul li').unbind('mouseleave');
});
</code></pre>

<p>But this obviously prevents the hover animation from firing correctly. Can anyone suggest a more elegant solution?</p>

<p><a href="http://jsfiddle.net/codecowboy/mDUa9/8/" rel="nofollow">http://jsfiddle.net/codecowboy/mDUa9/8/</a></p>
