Сверстать выпадающее меню по аналогии

Нужно сделать выпадающее меню для сайта  https://pokupkigoda.ru/ при наведении на "Все категории". Сделать по аналогии как сделано здесь -  https://www.consumerreports.org/cro/index.htm при наведении на Product Reviews.

На десктопе:

1. При наведении на Product Reviews появляется выпадающий список с подпунктами и ссылками к каждому подпункту- http://prntscr.com/o648yj

2. При наведении на подпункт появляется новый список ссылок справа - http://prntscr.com/o649nq

3. Основные ссылки поделены на группы - http://prntscr.com/o649yu где каждый первый пункт для привлекательности выделяется.

Нужно сделать по аналогии.

На мобилках:

1. При клике на гамбургер появляется выпадающее меню которое занимает 50% экрана по ширине

2. В первой части главные пункты меню и подпункты выпадающего списка -  http://prntscr.com/o64dnl

3. При клике на подпункт - http://prntscr.com/o64dxc появляются связанные с ним ссылки, на том же месте. И есть возможно вернутся назад к главным пунктам меню и подпунктам выпадающего списка.

Сайт сделан на WP. Но весь код можно жестко вбить в файл header.php. Или сделать у себя в скаченной странице и я все сам перенесу. Ссылки по необходимости будем там добавлять руками или позже допилим функционал для WP. т.е. по сути нужна только верстка. Основной дизайн (без шрифтов) можно взять с сайта примера. Код должен быть чистым, списки ссылок лучше формировать