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

Wordpress navigation submenu shifts items to the right on hover

本文关键字：右移移动项目悬停鼠标导航菜单 Wordpress 更新时间：2023-09-26

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

发生这种情况的网站是荷兰网站http://www.skoll.nl/。我在把它转换成JS-fiddle时遇到了麻烦，但我明天再试一次。

当我将鼠标悬停在第一个子菜单上时，第二个子菜单就会打开。通常，第二个子菜单中的项比项本身大，导致列表项展开并将其他项推到右侧。这可以通过导航到"Informatie"answers"Evenementen"来查看。你可以看到右边的项目向右移动，使得它很难点击。

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

为li元素添加以下样式，例如包含" Evenementen " link:

position: relative;

为子菜单添加如下样式:

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

你可能还需要添加一些其他的样式，使一切看起来像现在的样子，但在此之后，子菜单将不再移动项目