Как реализовать такое меню?

Question

[Евгения Сатонина]

Добрый вечер.
У меня есть сайт, который я создал средствами программы adobe muse (конструктор сайтов). Всё бы ничего, но грузится он чертовски долго, т.к. программа эта генерирует миллионы кода. И вот я начал изучать верстку, и реши его сверстать нормально. Застопорился на выпадающем меню...
Для меня пока это сложно, но буду признателен за любую помощь / советы.

Answer 1

[Владислав Бойченко]

Принцип примерно такой: codepen.io/anon/pen/xgPRKZ

Comments

[Евгения Сатонина]

То что нужно. Примного благодарен.

Answer 2

[Вероника]

1) делаешь выпадающее меню дочерним элементом блока/ссылки, при наведении на которую меню должно выпадать.
2) позиционируешь абсолютно в то место где оно должно отображаться
3) прячешь его display:none
4) далее такой финт ушами: .parent:hover .menu {display: block}
При наведении на родителя будет отображаться меню.

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

Второй вариант: сделать появление меню по клику. Но тут без js не обойтись.

Еще нюанс: меню лучше верстать ul-списком, только обнулить все отступы и стили.

Answer 3

[Дмитрий]

Добрый вечер.
тыц

Comments

[Евгения Сатонина]

Я искал. Подходящего не нашёл. Там выпадающее меню в несколько колонок.
Вот наиболее похожее https://webformyself.com/kak-sozdat-moshhnoe-vypad...
Но там так много инфы, и я не уверен что это самый простой из вариантов.

[Дмитрий]

Евгений Сатонин:

Но там так много инфы

Вы предлагаете Вам вслух прочитать, через скайп? Чтобы Вы свои глаза не напрягали?

Я искал. Подходящего не нашёл

В это невозможно поверить!!!