: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();
    }
});

Answer 2

The solution with mouseenter and mouseleave didn't work for us, these events were also triggered when we hovered over the suggestion list. Instead we listened for focus/blur on the input element. Downside is that once you start entering something in the field the user has to click outside the dropdown, regardless of if he used the autocomplete or not.

 <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>

With this jquery code:

$('.login input').on('focus', function () {
    $('.login_form').addClass("open");
}).on('blur', function () {
    $(".login_form").removeClass("open");
});

and of course this css:

.open {display: block}