javascript - 以不同的高度(大型菜单)将一个分区排列在另一个下方

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