使用数据库动态填充导航菜单

Question

我目前正在建立一个网上商店。这个网上商店将包含与我工作的公司相关的数百种不同类型的产品。

我目前正在使用过滤器菜单，用户可以点击不同的类别来过滤显示给他们的产品列表。由于用户可以选择数百种不同的类别，因此我使用数据库动态加载此列表。包含此信息的表格有3列。 categoryID，name和parentID。

我的问题是我找不到将其转换为多级导航菜单的好方法。最终结果将是嵌套的ul，允许用户单击父li来滑动隐藏的ul。点击含有“蔬菜”的li将滑动包含李的胡萝卜和芹菜的ul。

这是导航菜单工作的jsfiddle，我想不出动态填充ul和li的好方法。

HTML     

<ul class='top-level'>
    <li class='top-level-child'>Fruit</li>
    <ul class='second-level'>
      <li class='second-level-child'>Apple</li>
    </ul>
  <li class='top-level-child'>Vegetable</li>
    <ul class='second-level'>
      <li class='second-level-child'>Carrot</li>
        <ul class='third-level'>
          <li class='third-level-child'>Diced</li>
          <li class='third-level-child'>Chopped</li>
                    <li class='third-level-child'>Julienned</li>
                </ul>
      <li class='second-level-child'>Celery</li>
        <ul class='third-level'>
          <li class='third-level-child'>Diced</li>
          <li class='third-level-child'>Chopped</li>
                    <li class='third-level-child'>Julienned</li>
                </ul>
        </ul>
    <li class='top-level-child'>Snack</li>
        <ul class='second-level'>
      <li class='second-level-child'>Twinkie</li>
        </ul>
</ul>

https://jsfiddle.net/zdd1b79u/

编辑：忘记提及，数据库信息是json格式。

感谢任何建议。