javascript - WordPress 导航子菜单在悬停时向右移动元素

Question

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

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

问题

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

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

提前致谢。

Answer 1

将以下样式添加到包含例如“Evenementen”链接的 li 元素:

position: relative;

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

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

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