单击登录建议时阻止mouseLeave事件

Question

我有一个下拉菜单，在几秒钟后会在mouseleave上消失。

该菜单包含一个效果很好的登录表单，除了您尝试使用“建议的”＃来自浏览器的登录密码/密码链。

当您尝试选择建议的登录信息时，该页面会认为这是一个“鼠标离线”＆＃39;事件并关闭菜单。有没有办法防止这种情况发生？

这是我的菜单的基本布局：

<nav> 
 <a class="hover-link">Hover Link</a>
 <div class="dropdown">
   <form class="login-form">
     login form
   </form>
 </div> 
</nav>

和jQuery

function hideMenu() {
  setTimeout(function () {
      $('.dropdown').css("display", "none");
  }, 300);
}

$(".dropdown").mouseLeave(hideMenu);

以下是浏览器建议的含义图片：

简而言之，当用户点击此钥匙串建议时，整个下拉菜单都会关闭。点击下拉列表中的任何其他按钮时不会发生这种情况，因为它不算作mouseLeave事件！

Answer 1

$(document).ready(function(){
$(".hover-link,ul").mouseover(function(){
$(".dropdown").slideDown(300);
$("li").css("border","2px solid #f4bef2")
$(".hover-link,ul").mouseleave(function(){
$(".dropdown").css("display","none");
$("li").css("border","1px solid #A9A9A9")
});
});
});

li{
height: 30px;
width: 90px;
border: 1px solid #A9A9A9;
background-color: #F2F2F2;
list-style-type: none;
padding: 25px 50px;
}
.dropdown{
height: 30px;
width: 90px;
border: 1px solid #A9A9A9;
background-color: #F2F2F2;
display:none;
padding: 25px 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav> 
<ul>
 <li><a class="hover-link">Hover Link</a></li>
 
 <div class="dropdown">
   <form class="login-form">
     login form
   </form>
   </ul>
 </div> 
</nav>