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

Question

[webrapist]

Здравствуйте.

Сделал кое-какую менюшку, но не могу разобраться с позиционированием.

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

Суть в том, что позиционирование идёт от левого верхнего угла браузера, т.е. при изменении отступов сверху или слева, кнопка не будет расположена на месте. Можно ли как-то позиционировать выпадающий список от координат кнопки, при наведении на которую появляется этот выпадающий список?

Пробовал что-то делать с помощью position: relative - часть выпадающего меню просто-напросто скрывается, то есть меню из div'a с классом header просто не выходит, смещая кнопку "Главная" слегка наверх.

Comments

[Дмитрий]

position: absolute; top: 100%;

[Дмитрий]

https://jsfiddle.net/soledar10/h4h7c5pm/

[webrapist]

Дмитрий: напишите в ответы, я вам поставлю решение. Попробую использовать ваш вариант. Не смогли бы вкратце прокомментировать почему мой код не работает?

Answer 1

[Дмитрий]

не получается потому что position: fixed - по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

1) удалите position: fixed для .menu
2) ul > li - position: relative;
3) submenu - position: absolute; top: 100%; left: 0;

https://jsfiddle.net/soledar10/h4h7c5pm/