:悬停自动填充字段后悬停停止

我从来不是javascript下拉菜单的忠实粉丝,所以当我可以使用CSS设置下拉菜单时,我会.但现在我遇到了一个小问题.

我有一个登录按钮和一个小的登录表单模块,它是按钮的兄弟.当我将鼠标悬停在按钮上时,登录表单会直接显示在它下面(通过设置display:block他的兄弟),你可以转到表单上悬停在表单上的表单,这样表单模块就不会再次消失.

一切都很简单:

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

可以在这里找到一个JSFiddle

我遇到的问题是,当我输入一封信时,我的浏览器想要自动完成.例如,如果我键入"h",则会删除"Hans Wassink".但当我悬停那个自动完成框时,整个东西就像一个泡泡一样.我不再徘徊登录模块,所以它消失了.很烦人.有什么我能做的吗？我知道我可以将自动完成设置为"关闭"但我希望我的用户拥有该选项.

我注意到当我使用相同的解决方案但使用jQuery时也会发生这种情况.

编辑:完成问题.我在FF28/Windows上.但我的同事在这里也有其他版本的FF和IE(接待员,其余的有真正的浏览器:)).