Как сделать подменю ровной ширины с пунктами меню первого уровня?

Question

[freeman0204]

Делаю подменю по уроку. Вот подменю codepen.io/freeman0204/pen/RRKyqd Автор делает так

.menu ul li:hover ul {
    display: block;
    position: absolute;
}

дает подменю position: absolute; и они у него стают такими же по ширине как и меню первого уровня. А у меня немного выпирает, почему так?
И у меня вопрос по работе position: absolute;

Ширина элемента с position: absolute устанавливается по содержимому.

Это ясно, так и произошло.

Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static. Если такого родителя нет – то относительно документа.

Но почему то позиционирование идет относительно первого уровня меню, а не документа, почему так?

Comments

[metaf]

В вашем коде копаться лень :) отвечу по второй части - по умолчанию у позиционированного элемента значения top right bottom left не 0, как можно предположить, а auto. А значит элемент никуда не смещается относительно своего static позиционирования, пока вы не укажете куда ему двигаться.

Answer 1

[HamSter]

Может быть все-таки какую-то мелочь из урока упустил?

Можно, например, так поправить:

.menu ul li {
  position: relative;
}

.menu ul li:hover ul {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
}