Wordpress 导航子菜单在悬停时将项目向右移动

Question

我正在开发一个使用三深度导航菜单的 Wordpress 网站。菜单是自动生成的，由<li> 和<ul> 项目组成。当打开包含子菜单的列表时，我遇到了列表项向右移动的问题。

发生这种情况的站点是荷兰站点http://www.skoll.nl/。我无法将其转换为 JS-fiddle，但我明天会再试一次。

问题

每当我将鼠标悬停在第一个子菜单中的某个项目上时，都会打开第二个子菜单。通常，第二个子菜单中的项目比项目本身大，导致列表项目扩展并将其他项目推到右侧。这可以通过导航到“Informatie”然后“Evenementen”来查看。您可以看到右侧的项目向右移动，使得点击变得相当困难。

我已经在这个问题上花费了很多时间，但没有进一步了解，所以我想回答的问题是： 如何阻止第一个子菜单中的列表项向右移动，同时保留导航菜单的当前布局？我对 CSS 和 JS 解决方案都很好。

提前致谢。

Answer 1

将以下样式添加到 li 元素，其中包含例如“Evenementen”链接：

position: relative;

然后为子菜单添加以下样式：

position: absolute;
left: 0;
top: 20px; /* this needs to be adjusted */

您可能还需要添加一些其他样式以使所有内容看起来像现在一样，但是在此子菜单之后将不再移动项目。