Bootstrap 4 菜单悬停不'；我关不好

我有一个带有下拉菜单的菜单，其中有另一个下拉菜单。如果我将鼠标移到第一个下拉列表上，它将展开。它是通过css实现的。但是当我尝试子菜单的css时，它不起作用。所以我添加了javascript来控制在悬停时打开子菜单。这是可行的，但直到我将鼠标从第一个下拉菜单中移开，子菜单才关闭。我想在鼠标离开子菜单项后将其关闭

为了更好地理解这一点，请看我的。打开菜单并将鼠标悬停在商店商品上，它将展开。然后将鼠标移到“更多选项”项上，它将展开。如果将鼠标移动到Sub 2，则应关闭更多选项，但不会关闭。我知道我让javascript查看container-sub-menu1来关闭它，它在编码时工作。但是当我尝试使用sub-menu1时，它不起作用。有人能演示一下鼠标不在子菜单上时如何关闭它吗

$（“sub-menu1”）。在（“mouseenter”，function（）上{
//确保未显示：
if（！$（this.parent（）.hasClass（“show”））{
$（此选项）。单击（）；
}
});
$（“#container-sub-menu1”）。在（“mouseleave”，function（）上{
//确保它显示为：
if（$（this）.hasClass（“show”））{
$（this）.children（'.dropdown toggle'）.first（）.click（）；
}
});
。下拉：悬停>。下拉菜单{
显示：块；
}
.dropdown:悬停>.ul.li.dropdown子菜单{
显示：块；
}
海军苏布尔{
左边距：100px；
}
.下拉项{
左侧填充：10px；
}
.下拉项：：第一行{
填充顶部：0px；
}
.下拉子菜单{
位置：相对位置；
垫底：-10px；
}
.下拉子菜单>.下拉菜单{
位置：绝对位置；
顶部：-20px；
左：54px；
}

Jquery在鼠标未悬停时关闭子菜单：

$("#sub-menu1").on("mouseleave", function () {
  // make sure it is not shown:
  if (!$(this).parent().hasClass("hide")) {
    $(this).click();
  }
});

演示：


$（“sub-menu1”）。在（“mouseenter”，function（）上{
//确保未显示：
if（！$（this.parent（）.hasClass（“show”））{
$（此选项）。单击（）；
}
});
$（“#sub-menu1”）。在（“mouseleave”，function（）上{
//确保未显示：
if（！$（this.parent（）.hasClass（“隐藏”））{
$（此选项）。单击（）；
}
});
$（“#container-sub-menu1”）。在（“mouseleave”，function（）上{
//确保它显示为：
if（$（this）.hasClass（“show”））{
$（this）.children（'.dropdown toggle'）.first（）.click（）；
}
});
。下拉菜单{
排名：75%！重要；
}
.下拉菜单：悬停>.下拉菜单{
显示：块；
}
.dropdown:悬停>.ul.li.dropdown子菜单{
显示：块；
}
海军苏布尔{
左边距：100px；
}
.下拉项{
左侧填充：10px；
}
.下拉项：：第一行{
填充顶部：0px；
}
.下拉子菜单{
位置：相对位置；
垫底：-10px；
}
.下拉子菜单>.下拉菜单{
位置：绝对位置；
顶部：-20px；
左：54px；
}

非常感谢。这当然有帮助。我根本不知道~符号。我曾尝试在FF中使用复制路径，但不起作用。但在您的示例中，如果将鼠标悬停在“更多选项”项目上，使子项目显示，然后向下移动鼠标以选择其中一项，则菜单有时会关闭，具体取决于鼠标的移动方式。如果鼠标在下拉菜单的某个项目上，有没有办法不关闭该下拉菜单？@user3052443 now u try menu不会关闭，这是因为下拉菜单和子项目之间的距离。下拉菜单{top:75%！important；}我添加了这个css，它将缩短下拉菜单和子项之间的距离，现在它不会关闭。@user3052443，正如你所问：如果鼠标在下拉菜单的某个项上，有没有办法不关闭下拉菜单？你可以这样做，但你必须使用脚本。如果我的解决方案运行良好，你可以在user3052443接受它。我感谢你的帮助。我不能让代码做我想做的，所以我会查看其他菜单，因为它的css在我上面。但是你回答了我的主要问题，所以我把它标记为接受。再次感谢。