Problem with jQuery mouseleave firing when container has select box
<p>I have a two containers -- one is nested inside of another.  When I hover over the parent, I want the child container to appear. When I mouseout, I want the child container to fadeout. The problem I'm having is the child container has a form that contains a "select box". When the user selects the select box -- the mouseleave event is accidentally fired. </p>

<p>How can I stop the select box from tripping the mouseleave event?</p>

<p>You can see my working code here: <a href="http://jsfiddle.net/rsturim/9TZyh/3/" rel="nofollow">http://jsfiddle.net/rsturim/9TZyh/3/</a></p>

<p>Here's a summary of my script:</p>

<pre><code>$('#parent-container').live("mouseenter", function () {
    var $this = $(this),
    $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().fadeTo('slow', 1.0);
}).live("mouseleave", function (e) {
    var $this = $(this),
    $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().hide();              
});
</code></pre>

<p><strong>edit</strong>: appears fine in WebKit-based browsers. Fails in Firefox and IE7-IE9.</p>
