Mega menu options in hubspot - example - not working code

mega-menu.html

<header>
    <nav>
        {% menu id="{{ module.main_menu }}", no_wrapper=True %}
    </nav>
    <div id="how-we-do-it" style="display: none;">
        {% menu id="{{ module.how_we_do_it }}", no_wrapper=True %}
    </div>
</header>
<script>
function megaMenuSetup() {
    var mega_menu_extended = $('#how-we-do-it ul').parent().html();
    $('#how-we-do-it').remove();
    $('#hs_menu_wrapper_main_menu > ul > li.hs-item-has-children:eq(0) > ul:eq(0)').wrap('<div class="mega-dropdown mega-dropdown-large" />');
    $('#hs_menu_wrapper_main_menu > ul > li.hs-item-has-children:eq(1) > ul:eq(0)').wrap('<div class="mega-dropdown mega-dropdown-small" />');
    $('.mega-dropdown-large').append(mega_menu_extended);

    $('#hs_menu_wrapper_main_menu > ul > li').on('mouseenter', function() {
        $(this).addClass('hover');
        $('#hs_menu_wrapper_main_menu > ul > li > a').css('color', '#cccccc');
        $(this).on('mouseleave', function() {
            $(this).removeClass('hover');
            $('#hs_menu_wrapper_main_menu > ul > li > a').css('color', '#ffffff');
        });

    });
}
</script>