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

Question

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

发生这种情况的网站是荷兰网站http://www.skoll.nl/。我很难将其转换成JS小提琴，但明天我会再试一次。

问题

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

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

提前致谢。

Answer 1

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

position: relative;

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

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

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