當主菜單下拉菜單關閉時，子菜單鏈接仍然可點擊

我正在嘗試創建一個設置，其中包含導航欄，導航欄內的可摺疊菜單以及網站內容。當主菜單下拉菜單關閉時，子菜單鏈接仍然可點擊

很抱歉的壞榜樣，但有點像這樣：https://jsfiddle.net/2nqchLpf/

正如你可以看到，如果你將鼠標懸停在子菜單鏈接時，下拉未展開，你仍然可以點擊它們。

如何獲取顯示在內容後面的鏈接，同時讓導航欄顯示所有內容？

我已經申請z-index這樣的：

.navbar { 
    position: fixed; 
    z-index: 1000; 
} 

.big-dropdown { 
    position: absolute; 
    z-index: -1; 
} 

#content { 
    position: relative; 
    z-index: 999; 
}

來源

2017-05-08 Timothy Fisher

這是棘手與z-index，考慮堆疊順序等z-index特點。這是一個完整的破解：Basics of the CSS z-index property

但是，對於一個簡單和容易的解決方案，由於您已經在使用position: absolute，只需將子鏈接從屏幕上移開即可。

因此，不是這樣的：

.big-dropdown { 
    opacity: 0; 
    height: 200px; 
    background-color: #fff; 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin-top: 4em; 
    width: 100%; 
} 

.show { 
    opacity: 1!important; 
}

嘗試是這樣的：

.big-dropdown { 
    opacity: 0; 
    height: 200px; 
    background-color: #fff; 
    position: absolute; 
    left: -9999px; /* adjustment */ 
    top: 0; 
    margin-top: 4em; 
    width: 100%; 
} 

.show { 
    opacity: 1!important; 
    left: 0; /* new */ 
}

revised fiddle

來源

2017-05-08 01:49:10

bleh謝謝你的問題編輯。這很容易申請，無需改變其他任何東西。奇蹟般有效！！ –

這可能不是你在尋找什麼，但如果你有

.show { 
display: block; 
}

和使用替代

.show { 
opacity: 1!important; 
}

display: none;

代替

opacity: 0;

它會工作

來源

2017-05-08 01:48:59

我沒想到這樣做的，它的工作，但這樣的網站已經建立我更喜歡使用不透明的動畫。 Michael_B的回答是我一直在尋找的感謝。 –

當主菜單下拉菜單關閉時，子菜單鏈接仍然可點擊

回答

相關問題