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

Mega Menu

В статье Все статьи

 

Раз уж пошла такая маза быстренько рассмотрим такую тему как Mega Menu. Ничего сложного в ней нету, несмотря на название. Идея состоит в том, что вместо подменю находится какой-нибудь блочный элемент, со своей собственной разметкой ( вместо ul -> div ). Идея остается таже. Сначала этот div спрятан, а при наведении на пункт 1-го уровня меню div появляется:

А уже то что находится внутри и как это оформлять полностью зависит от Вас. Этот вид меню наиболее редкий, т.к. подразумевается индивидуальная разметка. Переходим к примерам

HTML

Пример 1.
(example_1::github)

На flexbox’е

Пример 2.
(example_2::github)

Следующий пример я сделал используя SCSS, а за GRID у меня отвечает Susy (не хотеля я тянуть bootstrap и захламлять код бесполезными классами). Собирается это все при помочи GulpJS. Короче понтанулся

SCSS