Расположение div один под другим с разной высотой (мегаменю)

Question

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

В приведенном ниже примере столбцы первого ряда в порядке, и два последних из второго ряда тоже в порядке.Проблемными являются «Клеи» и «Режущие инструменты».Вместо того, чтобы идти под «Paintig» и «Coloring», они находятся в одной строке, где заканчивается «Creativity».

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

DEMO

<http://jsfiddle.net/rjkbw6to/1/>

Answer 1

#mz_primaryNav ul>li ul li {
  display: flex;
  flex-wrap: wrap;
  margin-top: -20px;
}

#mz_primaryNav ul>li ul li>div {
  margin-top: 20px;
}