:hover stops after hovering autocomplete field

Question

I never was a big fan of javascript dropdowns, so when I can style a dropdown using CSS I will. But now Im running into a small problem.

I have a login button, and a small login form module, which is a sibling of the button. When I hover over the button, the login form shows up directly under it (By setting display:block on his brother) and you can go to the form where the hover over the form takes over so the form module doesnt disappear again.

It's all pretty easy:

#home-login-button:hover + #login, #login:hover {
    display: block;
}

A JSFiddle can be found here

The problem I have is that when I type in a letter, my browser wants to autocomplete. If I for example type "h" it drops down "Hans Wassink". But when I hover that autocomplete box the whole thing pops like a bubble. Im no longer hovering the login module so it disappears. Very Annoying. Is there anything I can do? I know I can set autocomplete to 'off' but I want my users to have that option.

I noticed it also happens when I use the same solution but with jQuery.

EDIT: To complete the question. Im on FF28 / Windows. But My colleagues here have it too on other versions of FF and on IE (The receptionist, the rest has real browsers :) ).

Answer 1

Here is a Jquery Solution.

HTML CODE

<div class="login"> <span>Login</span>

    <div class="login_form">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" value="" />
    </div>
</div>

CSS CODE

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

JQUERY CODE

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