Div disappears when hovering the input autocomplete in Firefox

Question

I've made up a JSFiddle.

It's a login form that appears when hovering the Sign In menu, but when hovering the input autocomplete the login form disappears, and I don't want that.

How can I make the login form stay without disabling the input autocomplete, can this be made only with css?

<div class="login"> <span>Sign in</span>

  <div class="login_form">
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" value="" />
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="pass" value="" />
    <input type="submit" class="" value="Sign in" />
  </div>

</div>

.login {
  position: relative;
  height:60px;
  width:50px;
  margin:30px;
}
.login:hover .login_form {
  display: block;
}
.login_form {
  box-shadow: 0 0 1px;
  padding:10px;
  position: absolute;
  left: 0px;
  top: 30px;
  z-index: 9999;
  display: none;
}

Answer 1

Not a good solution, but a really useful hint: http://jsfiddle.net/ymDTj/2/

Using JavaScript (jQuery):

$('.login').on('mouseover', function () {
    $('.login_form', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.login_form', this).hide();
    }
});