Элементы подменю, вызывающие разнесение пунктов главного меню на зависании

Question

У меня есть этот неупорядоченный список, который я ввел в меню. Я хочу синие пункты меню должны быть сосредоточены под красные пунктами меню верхнего уровня, поэтому я дал КРАСНЫМ пунктам меню, дисплей прогибается:

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

Проблема заключается в том, когда красные пункты меню парило над голубые пункты меню отбрасывают другие красные пункты меню.

https://jsfiddle.net/m14dxtz8/

Любые идеи, как это исправить без JS?

Answer 1

Добавьте это в CSS:

ul ul {position: absolute;} 

Делая свои позиции абсолюта, вы берете их из потока документов, чтобы они не «толкать вещи.»