从链接悬停到下一个链接时的 CSS Mega 菜单恢复到第一个选定的链接

Question

我正在尝试使用 Valeriu Timbuc 在此处找到的指南创建一个大型菜单：https://designmodo.com/create-css3-mega-menu/

I've found out while playing around with it that when a menu item is selected to show the menu div (menu 1), then when you select another menu (menu 2) to show it's menu div, if you move your鼠标在选定的菜单 div 下方（菜单 2 - 就像您尝试从新选择的 div 中选择一个项目一样），选定的菜单会跳回到您选择的第一个菜单项（菜单 1）。

这只发生在从右到左的菜单项 - 它不会发生在从左到右的项目。 在网络演示中，它看起来是双向发生的，在我的个人测试中，它只会从右到左发生

要重现该行为，请在此处的演示页面上执行以下操作：https://designmodo.com/demo/css3megamenu/

1. 将鼠标悬停在“收入”菜单项上
2. 将鼠标悬停在左侧的任何菜单项上 - 说“评分最高”或“最新消息”（在本示例中，我们将使用“最新消息”链接，因为下拉菜单中有项目）
3. 显示“新增功能”项后，立即向下移动鼠标以从“新增功能”下拉菜单中选择一项
4. 屏幕跳回到“收益”菜单。

做同样的事情，但从左到右的方向相反，即首先选择“最新消息”菜单项，然后将鼠标悬停在“收入”菜单项上将显示移动鼠标的正确行为不跳回到之前选择的菜单项。

要查看实际发生的情况，请观看此处的视频：https://imgur.com/a/3Jg4w0b

这个大型菜单非常适合我除了这个中等问题之外需要做的事情。任何有关这方面的帮助将不胜感激。

Answer 1

在查看了多个大型菜单解决方案后，我发现了导致此问题的原因。

在菜单下拉部分中定义菜单项时，显示的 CSS 应设置为“无”（而不是演示中显示的“块”），以防止 div 完全无法访问。

尽管由于可见性和溢出设置为“隐藏”，因此 div 似乎是隐藏的，但看起来 div 区域仍然存在，这就是为什么将鼠标悬停在菜单项下方仍然会像上一个下拉菜单项已被选中一样因为该下拉菜单仍然在屏幕上显示一个 div。

在悬停 CSS 上，显示应设置为“块”，这只会在您将鼠标悬停在链接上时绘制元素。