Центрирование ul или li в выпадающем меню

Question

Я построил выпадающее меню, используя только html и css. Я бы хотел сосредоточить раскрывающийся контент в раскрывающемся меню, когда он щелкнут.

В моем коде это будет центрирование фиолетового сечения относительно светло-голубой секции. Мой код - https://jsfiddle.net/92uhs075/

Любые предложения по этому поводу?

Я попытался сменить <ul> display: table, а затем <li> float: left, изменяя поля вокруг (0 авто) и отрицательные временами, но ничего не работает для меня.

Благодарим вас за руководство.

Answer 1

С вашего ул абсолютно позиционирован переместить его в правый 50%, а затем преобразовать его обратно влево на 50%:

ul { 
    left: 50%; 
    transform: translateX(-50%); 
}