Containing div loses focus when mousing over selec

Question

I have a div that appears when you hover over its container and the div is positioned absolutely, so that it appears outside of its container. It has multiple select dropdowns within it, and when I try to change the value of any of them, the focus is lost it triggers a mouseout on the container.

I've set up a working example of this issue here:
http://jsfiddle.net/uBjR3/2/

This issue is occurring in FireFox and IE (Chrome seems to work fine).

=====

HTML:

<div class="container">
    <div class="dropdown">
        <select>
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
        </select>
    </div>
</div>

CSS:

.container { background-color: red; height: 30px; width: 60px; padding: 20px; position: relative; }

.dropdown { background-color: blue; height: 300px; width: 200px; padding: 20px; position: absolute; top: 70px; left: 0px; display: none; }

JQuery:

$('.container').hover(
  function () {
    $('.dropdown').show();
  },
  function () {
    $('.dropdown').hide();
  }
);

Answer 1

I just had a look at your code. Replace your jQuery with this and it will work as you wish

$(document).ready(function(){

      $('.container').hover(function(){
      $('.dropdown').stop(1).slideDown();
   },function(){
      $(".dropdown").stop(1).slideUp();
   }); 

});

here's the working demo http://jsfiddle.net/kevinPHPkevin/uBjR3/11/

Answer 2

You could use a timeout to prevent the hide action. Something like:

var timer;
$('PARENT')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
            $('.dropdown').show();
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.container')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.dropdown');