導致主菜單項散佈在懸停上的子菜單項

Question

我有這個無序列表，我已將樣式放入菜單中。我想頂層紅色菜單項下面爲中心的藍色菜單項，所以我給了紅色的菜單項柔性的顯示：

nav > ul > li > a { 
    color: red; 
    display:flex; 
    justify-content:center; 
} 

問題是，當紅色的菜單項上空盤旋藍色菜單項將其他紅色菜單項目推開。

https://jsfiddle.net/m14dxtz8/

任何想法如何解決這一問題，而不JS？

Answer 1

添加到您的CSS：

ul ul {position: absolute;} 

通過使得他們的地位是絕對的，你帶他們出去了公文流轉，使他們不「推周圍的事物。」