: freeze stops after the autocomplete field freezes

Question

I have never been a big fan of javascript dropdowns, so when I can create a dropdown using CSS, I will. But now Im facing a little problem.

I have a login button and a small login form module, which is a child of the button. When I hover over the button, the login form is displayed directly below it (by setting display:block for my brother), and you can go to the form in which it hangs over the form, so the form module no longer disappears.

Everything is pretty easy:

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

JSFiddle can be found here

The problem is that when I type the letter, my browser wants to autocomplete. If I like “h” for example, it drops “Hans Wassink”. But when I find this autocomplete block, the whole thing appears like a bubble. Im no longer freezes with the input module, so it disappears. Very annoying. Can i do something? I know that I can set auto-completion to disable it, but I want my users to have this option.

I noticed that this also happens when I use the same solution, but with jQuery.

EDIT: Ask a question. Im on FF28 / Windows. But my colleagues have it on other versions of FF and on IE (the registrar, the rest have real browsers :)).

Answer 1

Here is the 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; } 

REDUCTION CODE

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