select box causes mouseout event on parent div

select box causes mouseout event on parent div

I have a strange problem with a dropdown menu that is contained in a hovering div.

The issue that the mouseleave event is fired the moment you move your mouse over the dropdown select list that appears when you click the dropdown menu.

I have tried checking the relatedTarget object but it is null when mousing over the drop down list.

I have written up a quick example below. If you mouseout of the black box an alert pops up. If you also try dropping down the select list and selecting a value the mouseout also fires. This is causing a problem in my app because I am trapping the mouseout event to hide the popup menu.

I am using jQuery 1.3.2.

<html>
<head>
   <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
   <div id="top">
     <div id="middle" style="width: 300px; height: 300px; background-color: #000000;">
       <br/>
       <select>
         <option>one</option>
         <option>one</option>
         <option>one</option>
         <option>one</option>
       </select>
       <input type="text"/>
     </div>
   </div>
   <script type="text/javascript">
      $('div#middle').mouseleave(
        function(e) {
           alert('moused out of black div!');
        }
      );
   </script>
</body>
</html>