I am creating a menu like this https://squareup.com/ I have the html,css, and jquery ready. Now, I am trying to:

Create the menu items with it’s sub-menu items via wp-admin -> appearance -> menus ( which I have done )

output the menu item with it’s corresponding sub-menu items separately and dynamically.

 <header>
        <?php if ( get_field('landing_hero_image') ): ?>
                <div class="menu" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
                    <a class="click-me">
                        main menu item
                    </a>
                </div>
                <div class="hidden-content">
                    sub menu item associated with the main item
                </div>
                <div class="banner" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
                </div>
            <?php endif; ?>
    </header>

So to summarize, how do I separate the output ( html ) menu items and their children?

Many thanks in advance.