Javascript 引导防止下拉菜单在光标移动时消失

我有一个

navbar

，左侧有徽标，最右侧有一个

navbar

（

float:right

），其中包含一个

下拉列表作为第一个元素和一些其他元素。下拉菜单大且响应迅速

我希望能够做到的是，当我将鼠标悬停在下拉菜单上并在导航栏中将光标向左移动（朝向徽标）时，防止下拉菜单消失。只要光标仍在导航栏中，下拉列表应保持打开状态。所以这不应该发生-


JS小提琴-

代码-

我已经尝试在菜单打开时将
左填充添加到
下拉菜单中
，但填充必须根据窗口大小动态进行，否则会推送徽标。因此，我正在寻找更好的解决方案，而不是添加填充

我对基于js和css的解决方案都很满意。
我会使用
flexbox
和
flexgrow
，如下所示

这是因为
flexbox
允许元素在有空间的情况下变大（或缩小）。因此，下拉链接（父元素
-元素）在默认样式下是链接上文本的宽度，但当我们将鼠标悬停在链接上时，
-元素将尽可能地增长，即一直到
品牌
，使下拉列表在鼠标悬停在顶部栏上时不会隐藏（现在包含更大的
（下拉）元素）


.navbar.container流体{
显示器：flex；
}
.导航栏.容器流体.导航栏塌陷{
柔性生长：2；
}
.大菜单{
位置：绝对位置；
右：0；
左：0；
/*填充：27px0*/
}
.导航栏对吗{
显示器：flex；
证明内容：柔性端；
宽度：100%；
}
#菜单区{
显示器：flex；
}
#菜单区。下拉切换{
左边距：自动；
}
.下拉切换：悬停+.下拉菜单，.下拉菜单：悬停{
显示：块；
边际上限：0；
}
.大菜单：悬停{
柔性生长：2；
}
.下拉切换：悬停{
柔性生长：2；
}
.下拉开关{
文本对齐：右对齐；
}













这很聪明，但是
悬停
必须停留在
下拉列表上
。它不能应用于整个
导航栏折叠
，因为
导航栏
也可以有其他元素。我想
调整内容：flex end；
而不是颠倒列表顺序并使用
flex direction:row reverse，但除此之外，完美！我认为如果你对你的答案添加一些解释，对其他人会有帮助。你也可以删除旧的建议，因为它将保留在历史中。：@aandis是的，这更有意义（责怪我太累了…）我按照你的建议更新了答案。我在这里回答问题还是新手，谢谢你的指导！：）