将div以不同的高度排列在另一个下方（大型菜单）

Question

我有一个包含很多子菜单的菜单有问题。菜单是动态生成的，我也不知道类别和子类别的正确数量。 在打开菜单的那一刻，第二行的列变得混乱。当我调整屏幕大小时会发生同样的事情，而不是一屏之下。

在下面给出的示例中，第一行的列都可以，第二行的最后两列也可以。有问题的是“粘合剂”和“切割工具”。 不在“ Paintig”和“ Colouring”下，它们在“ Creativity”结束的同一行。

我不得不提到，我不能在一个div中放置两个类别，因为在这种情况下，当调整屏幕大小时，这些类别将不会在另一个类别之下。 这是我的示例，如果有人帮助我，我将非常感激。

演示

<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;
}