折叠导航 - 如何在悬停/单击时使下拉菜单出现在“服务”导航链接下？

如何解决折叠导航 - 如何在悬停/单击时使下拉菜单出现在“服务”导航链接下？

当分辨率小于 768 像素宽时，我的导航栏会折叠，但我的导航中的下拉菜单有问题。当我悬停/单击“服务”时，下拉菜单会向上推“服务”和“组合”，老实说看起来不太好。当您将鼠标悬停在/单击“服务”时，我怎么能将它放在“服务”所在的位置，并且下拉菜单（“Rails”和“事件”）出现在它下方并按下“组合”链接？

我遇到的最大问题是在移动设备上查看时，当您单击“服务”时，由于它的定位方式，它会自动从下拉列表中选择“铁路”链接。如何固定“服务”按钮的位置，以便子菜单显示在其下方？

下面是我的代码。

enter code here codepen

解决方法

发生这种情况是因为您已将 justify-content: space-evenly; 赋予 .nav-links，因此它会根据内容调整间距。

将其更改为 justify-content: normal;，并为空格填充 li。

@media only screen and (max-width: 768px)
.nav-links {
    justify-content: normal;
    float: none;
    position: fixed;
    z-index: 9;
    {...}
}