Menu with more levels - <ul> for each depth

[turolopezsanabria]

Hello I'm trying to hide all submenu items, and display them only if the parent is active. The problem is that the menu has only <li> for all levels. It would be great to have a structure like the one below, but I can't make it work:

• Title
• • Section 1
  • Section 2
  • Section 3
  • Section 3.1
  • Section 3.2
  • Section 3.3
  • Section 4

<ul class="doc-nav">
<li><a class="link active" href="#">Title</a></li>
<li>
<ul class="doc-nav-sub-list">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<ul>
<li>Section 3.1</li>
<li>Section 3.2</li>
<li>Section 3.3</li>
</ul>
<li>Section 4</li>
</ul>
</li>
</ul>

Instead of what I get right now:

• Title
• • Section 1
  • Section 2
  • Section 3
  • Section 3.1
  • Section 3.2
  • Section 3.3
  • Section 4

<ul class="doc-nav">
<li><a class="link active" href="#">Title</a></li>
<li>
<ul class="doc-nav-sub-list">
<li class="child">Section 1</li>
<li class="child">Section 2</li>
<li class="child">Section 3</li>
<li class="grandchild">Section 3.1</li>
<li class="grandchild">Section 3.2</li>
<li class="grandchild">Section 3.3</li>
<li class="child">Section 4</li>
</ul>
</li>
</ul>

I've tried many things, including things like the one below, but it's not working Can you help?

{{#each menu}}

{{#each children}}
<li>
{{header}}
{{#if grandchildren}}<ul>{{#each grandchildren}}<li>{{header}}</li>{{#each}}{{/if}}
</li>
{{#each}}

{{#each}}

[ajbrun]

Just in case anyone else is interested, I responded to @turolopezsanabria about this here also - hopefully it helps? https://github.com/kss-node/kss-node/issues/407

[turolopezsanabria]

Thanks for your help @ajbrun