Как сделать, что бы подменю располагалось по диагонали и по центру экрана?

Question

[evgenyforever]

Подскажите как сделать, так чтобы подменю отображалось горизонтально, а не вертикально и в то же время, что бы находилось точно по центру экрана, включая иконку подкатегории (пример: правильное отображение, при наведение на "Каталог товаров").

Есть код, просьба исправить (чтобы получилось, как на картинке выше).


нажать надо на кнопку в центре "Edit on CodePen"

Comments

[evgenyforever]

Было вот так https://codepen.io/anon/pen/NezGMM

Answer 1

[evgenyforever]

Решил задачу следующим образом:
1)

#mainMenu .drop .nextColumn{
line-height: 21px;
list-style: none;
float: left;
width: 20%;
padding: 0;
	margin: 0;
}

Изменил на:

#mainMenu .drop .nextColumn{	
line-height: 21px;	
list-style: none;
float: left;
padding: 0;
margin: 0;
width: 100%;	
display: flex;	
}

2)

#mainMenu .drop .nextColumn > li{	
margin-top: 12px;
display: block;
}

Изменил на:

#mainMenu .drop .nextColumn > li{
display: table-cell;
width: 100%;
text-align: center;
}

3) В #mainMenu .drop{
изменил padding: 24px 0px;
на padding: 51px 0px;

https://codepen.io/anon/pen/NeMvRV

Comments

[evgenyforever]

Осталось текст сделать вровень с категорией "Для салонов красоты".
У меня сейчас:
А нужно

Как бы так сделать?

Answer 2

[Максим]

так ? https://codepen.io/topicstarter/pen/WLJZgO

Comments

[evgenyforever]

Можно, как на этой картинке,
и как у вас в коде, чтобы посередине.
Чтобы соединить Ваш код и мой, который в самом описании задачи.

[Максим]

evgenyforever, https://codepen.io/topicstarter/pen/WLJZgO вот так ?

[evgenyforever]

Максим Ленский, Ваш первый вариант однозначно лучше, https://codepen.io/anon/pen/NeMoEj