时间戳

首页 > 解决方案 > 折叠导航 - 悬停/单击时，如何使下拉菜单显示在“服务”导航链接下？

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

问题描述

当分辨率小于 768px 宽时，我的导航栏会崩溃，但我的导航中的下拉菜单出现问题。当我将鼠标悬停/单击“服务”时，下拉菜单会将“服务”向上推，“投资组合向下”，老实说看起来不太好。当您将鼠标悬停/单击“服务”时，我如何才能将其保留在其所在位置并且下拉菜单（“Rails”和“事件”）出现在其下方并且只是按下“投资组合”链接？

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

下面是我的代码。

enter code here 密码笔

标签： htmlcssdrop-down-menucss-positionnav

解决方案

这是正在发生的，因为您已经放弃justify-content: space-evenly;了，.nav-links所以它正在根据内容调整间距。

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

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

推荐阅读