html - Firefox で入力オートコンプリートをホバーすると Div が消える

Question

私はJSFiddleを作成しました。

サインインメニューにカーソルを合わせると表示されるログインフォームですが、入力オートコンプリートにカーソルを合わせるとログインフォームが消えてしまいます。

入力オートコンプリートを無効にせずにログインフォームを維持するにはどうすればよいですか?これは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;
}