Problems building a dynamic recursive nz-menu?

[baarney]

I'm trying to build a dynamic menu using a recursive ng-template but it only appears to work properly for the first two levels.

If I build a static menu this all works as expected:

But if I try to use a recursive template, the last level is displayed below the parent not to the right, obscuring the items below, and hovering over the lowest level menu loses its parents:

Is there something wrong with the template code, or does nz-menu not support using recursive templates in this way?

Thanks,

Stackblitz Demo

import { NgTemplateOutlet } from '@angular/common';
import { Component } from '@angular/core';
import { NzMenuModule } from 'ng-zorro-antd/menu';

type MenuItem = {
  title: string;
  children?: MenuItem[];
};

const MENU_DATA: MenuItem[] = [
  { title: 'Nav One' },
  {
    title: 'Nav Two',
    children: [
      { title: 'Nav Two A' },
      {
        title: 'Nav Two B',
        children: [
          { title: 'Nav Two B (i)' },
          { title: 'Nav Two B (ii)' }
        ],
      },
      { title: 'Nav Two C' },
    ],
  },
];

@Component({
  selector: 'nz-dynamic-menu',
  imports: [NgTemplateOutlet, NzMenuModule],
  template: `
    <ul nz-menu nzMode="horizontal">

      <ng-template #menuItem let-menu="menu">
        @if (menu.children?.length > 0) {
          <li nz-submenu [nzTitle]="menu.title">
            <ul>
              @for (child of menu.children; track $index) {
                <ng-container *ngTemplateOutlet="menuItem; context: { menu: child }"/>
              }
            </ul>
          </li>
        } @else {
          <li nz-menu-item>{{ menu.title }}</li>
        }
      </ng-template>

      @for (menu of menuData; track $index) {
        <ng-container *ngTemplateOutlet="menuItem; context: { menu: menu }"/>
      }

    </ul>
  `,
})
export class NzDynamicMenuComponent {
  menuData: MenuItem[] = MENU_DATA;
}