折叠的导航 - 如何在 hover/click 时使下拉菜单出现在 'Services' 导航 link 下？

Question

当分辨率小于 768 像素宽时，我的导航栏会折叠，但我的导航栏中的下拉菜单出现问题。当我在 'services' 上 hover/click 时，下拉菜单将 'services' 和 'portfolio down' 向上推，老实说看起来不太好。当您在 'services' 上 hover/click 时，'services' 保持原样并且下拉菜单 ('Rails' & 'Events') 出现在其下方，我怎么能把它放在哪里并按下 'Portfolio' link?

我遇到的最大问题是在移动设备上查看时，当您单击 'services' 时，它会自动从下拉列表中选择 'rail' link，因为它的定位方式.如何固定 'services' 按钮的位置，使子菜单显示在按钮下方？

下面是我的代码。

enter code here codepen

Answer 1

发生这种情况是因为您已将 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;
    {...}
}

折叠的导航 - 如何在 hover/click 时使下拉菜单出现在 'Services' 导航 link 下？

Collapsed Nav - How can I make the drop down menu appear under 'Services' nav link when hover/click?

html

css

drop-down-menu

css-position

nav