Как спозиционировать выпадающее меню относительно основного?

Question

[weksik]

Добрый вечер всем!
Делаю меню, с выпадающими подпунктами. Появился вопрос, который не могу решить.
Ширина основных элементов нефиксированная, задается от названия блока + padding с двух сторон.
Как спозиционировать выпадающие элементы чтобы по ширине совпадали с основным блоком?
Выразился может криво, но прикладываю скриншот чего хочу и кодпен.
https://codepen.io/weksik/pen/yLyQYLP

upd: Border 1px black для наглядности

Answer 1

[Тарас Шульга]

https://codepen.io/angryyum/pen/zYxMvqm магия двух строчек css - если правильно вас понял.

Comments

[weksik]

Черная магия, спасибо большое :D

[weksik]

Если есть возможность, помогите, пожалуйста еще с одним моментом в этом же меню. Выпадающее меню появляется сразу, а к какому классу transition применить не могу понять. Хочется чтобы плавно появлялось.

[Тарас Шульга]

weksik, display none c transition не работают. Вам тогда нужно играть с высотой/шириной/опасити и тому подобное.

[weksik]

Понял, спасибо большое!

Answer 2

[Nikolay Matyushkin]

Блоку с классом .submenu добавьте:

width: 100%;
left: 0;