Render mega menu with different list items

Hi,
I want to create a mega menu like this:

I see, this is not the best way to go, but I was trying to list the first 4 children as the first list items, then have a heading above the 5th and display children and have another heading above the 6th and 7th, displaying the last children of course. But in the browser only the first 4 list items are getting rendered and the headings of course. The rest doesn’t get rendered. Why is that?

                        <ul class="menu-main__subpages__mega">
                            <strong>Digitale Dokumentendienste</strong>
                            <?php foreach ($item->children()->listed()->slice(0, 4) as $item): ?>
                                <li class="menu-main__subpages__item">
                                    <a class="menu-main__link<?= e($item->isActive(), ' menu-main__link--active') ?>"
                                       href="<?= $item->url() ?>"
                                       title="<?= t('open-page') ?> <?= $item->title() ?>"><?= $item->title() ?></a>
                                </li>
                            <?php endforeach ?>
                            
                            <strong>Krankenmanagement</strong>
                            <?php foreach ($item->children()->listed()->index(5) as $item): ?>
                              <li class="menu-main__subpages__item">
                                    <a class="menu-main__link<?= e($item->isActive(), ' menu-main__link--active') ?>"
                                       href="<?= $item->url() ?>"
                                       title="<?= t('open-page') ?> <?= $item->title() ?>"><?= $item->title() ?></a>
                              </li>
                            <?php endforeach ?>
                            <strong>Branchen</strong>
                            <?php foreach ($item->children()->listed()->slice(6) as $item): ?>
                                <li class="menu-main__subpages__item">
                                    <a class="menu-main__link<?= e($item->isActive(), ' menu-main__link--active') ?>"
                                       href="<?= $item->url() ?>"
                                       title="<?= t('open-page') ?> <?= $item->title() ?>"><?= $item->title() ?></a>
                                </li>
                            <?php endforeach ?>                            

                        </ul>

Another question:
Is there a way to give the subpage a position value. Like a 1 to poition the subpage in the first unordered list, a 2 to position it in the second unordered list and so on. This way the customer can position the pages in the mega menu himself.

Best regards