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

Question

[lestato9]

Нужно сделать выпадающее меню, второй уровень которого с помощью position: absolute расположен не рядом с первым, и между ними появляется пустое пространство. И когда в него попадаешь мышкой, второй уровень меню получает display: none так как перестает действовать hover на элемент первого уровня. Как делают такие меню?

Вот код, тоннель browsersync вроде как работает, по крайней мере у меня. В противном случае напишите, я выложу в другом месте.

https://xeuqwlycql.localtunnel.me/

Answer 1

[alvvi]

а) Изменить лэйаут так, чтобы пустого места не было, убрать паддинг у хедера, дать его элементам.
б) Хак с ::before и position: absolute.
в) Отказаться от этого безобразия, поскольку такие меню по ховеру - зло, клик лучше.

Comments

[lestato9]

Нельзя давать паддинг элементам, так как отступ довольно большой, а я верстаю так, чтобы можно было без проблем добавлять новые типичные элементы, в даном случае пункты меню. С псевдоэлементом хорошая идея, надо попробовать. А насчет того что это безобразие - согласен, но как-бы не я рисовал)

[alvvi]

lestato9: у вас на макете прям нарисовано "Показывать по ховеру" ? Если да, тому кто это нарисовал по лбу. Если нет, ничто не мешает показыавть по клику.

[lestato9]

Илья Ростопка: Да, именно так в ТЗ и написано)