Jquery 鼠标离开时隐藏下拉列表

我正在创建一个带有下拉菜单的导航栏，如下所示

当我的指针离开导航栏菜单和下拉菜单时，下拉菜单会被隐藏吗？我尝试了

悬停

，

鼠标移动

，和

鼠标移动

，但由于我不太了解两者的区别，而且我是这方面的新手，所以我被卡住了

我已经考虑过使用css

：hover

触发下拉显示，但是由于我有下拉放置功能，它们看起来不完全起作用

感谢您的帮助。：）

$（“.navbar菜单，.submenu下拉列表”）.hover（函数（）{
var menuChoice=$（this.val（）；
var menuPosition=$（this.find（“a”）.position（）；
var dropdownPosition=menupposition.left；
开关（menuChoice）{
案例0：
$（“.submenu-dropdown”）.html（“
新员工注册
所选员工列表
员工重新聘用
无银行账户的员工
无PPh 21的员工
”；
打破
案例1：
$（“.submenu-dropdown”）.html（“
备忘录模板
打印备忘录
”；
打破
案例2：
$（“.submenu-dropdown”）.html（“
下载并上传
发送电子邮件”
”；
打破
案例3：
$（“.submenu-dropdown”）.html（
员工数据批准
就业状态撤消
）；
打破
案例4：
$（“.submenu-dropdown”）.html（“
员工数据报告
员工人数报告
”；
打破
}
var dropdownWidth=$（“.submenu dropdown”）.width（）；
var rightEdge=$（document.width（）；
如果（（dropdownPosition+dropdownWidth）>=（rightEdge-16））{
var adjustRight=右边缘-下拉宽度-16；
$（“.submenu dropdown”）.css（{“left”：adjustRight+“px”}）；
}
否则{
如果（dropdownPosition如我在评论中所说：

您的下拉导航html结构有点错误，您应该
将
子菜单放在
父菜单内。您已经将子菜单显示出来了
父母的

但使用当前的
html
，您可以
在
鼠标上方显示
菜单，并在
鼠标移动
上隐藏它，如下所示：


$（“.submenu dropdown”）.mouseleave（函数（）{
$（this.hide（）；
});
$（“.navbar菜单各”）.mouseover（函数（）{
var menuChoice=$（this.val（）；
var menuPosition=$（this.find（“a”）.position（）；
var dropdownPosition=menupposition.left；
开关（menuChoice）{
案例0：
$（“.submenu-dropdown”）.html（“
新员工注册
所选员工列表
员工重新聘用
无银行账户的员工
无PPh 21的员工
”；
打破
案例1：
$（“.submenu-dropdown”）.html（“
备忘录模板
打印备忘录
”；
打破
案例2：
$（“.submenu-dropdown”）.html（“
下载并上传
发送电子邮件”
”；
打破
案例3：
$（“.submenu-dropdown”）.html（
员工数据批准
就业状态撤消
）；
打破
案例4：
$（“.submenu-dropdown”）.html（“
员工数据报告
员工人数报告
”；
打破
}
var dropdownWidth=$（“.submenu dropdown”）.width（）；
var rightEdge=$（document.width（）；
如果（（dropdownPosition+dropdownWidth）>=（rightEdge-16））{
var adjustRight=右边缘-下拉宽度-16；
$（“.submenu dropdown”）.css（{“left”：adjustRight+“px”}）；
}
否则{
如果（dropdownPosition您的
html
下拉导航结构有点错误，您应该将
子菜单放在
父菜单中。您已经从父菜单中显示了子菜单。您正在反向执行此操作。您应该将下拉菜单显示在父导航项的悬停位置。然后，当鼠标离开此导航位置时m（或下拉区域）下拉列表将消失。您可以使用纯CSS进行此操作