折疊導航 - 懸停/單擊時，如何使下拉菜單顯示在“服務”導航鏈接下？

Question

當分辨率小於 768px 寬時，我的導航欄會崩潰，但我的導航中的下拉菜單出現問題。 當我將鼠標懸停/單擊“服務”時，下拉菜單會將“服務”向上推，“投資組合向下”，老實說看起來不太好。 當您將鼠標懸停/單擊“服務”時，我如何才能將它留在原處，並且下拉菜單（“Rails”和“事件”）出現在它下方並且只是按下“投資組合”鏈接？

我遇到的最大問題是在移動設備上查看時，當您單擊“服務”時，由於其定位方式，它會自動從下拉列表中選擇“鐵路”鏈接。 如何修復“服務”按鈕的 position 以便子菜單出現在其下方？

下面是我的代碼。

在此處enter code here

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;
    {...}
}