Create a sub menu item container with action hook

gp-mega-menu.php

<?php
add_filter( 'walker_nav_menu_start_el', 'db_sub_menu_item_hook', 10, 4 );
function db_sub_menu_item_hook( $item_output, $item, $depth, $args ) {

    // Specify menu item class to target
    $class_string = 'gp_mega_item';
    $menu_item_classes = $item->classes;
	
    if ( empty( $menu_item_classes ) || !in_array( $class_string , $menu_item_classes ) ) {
        return $item_output;
    }
    $menu_item_slug =  $item->post_name;
    // create custom hook from $class_string and $menu_item_slug
    // example result gp_mega_menu_{menu-item-name}
    $custom_hook_name = $class_string . '_' . $menu_item_slug;
    
    // Add our common and specific hooks
    ob_start(); 
    ?>
    <ul class="sub-menu custom-sub-menu">
	<!-- <?php echo $custom_hook_name; ?> -->
	<li>
	<?php do_action('gp_before_mega_item'); ?>
	<?php do_action($custom_hook_name); ?>
	<?php do_action('gp_after_mega_item'); ?>
	</li>
    </ul>
    <?php
    $custom_sub_menu_html = ob_get_clean();
    // return the output after the menu items anchor
    $item_output .= $custom_sub_menu_html;

    return $item_output;
}

For the GP Primary Navigation we will need some CSS to allow our sub menu to span the width on the inside-navigation:

.gp_mega_item {
	position: static !important;
}
#site-navigation .gp_mega_item .sub-menu.custom-sub-menu {
	width: unset;
	left: 0;
	right: 0;
	box-shadow: none !important;
	background-color: transparent;
}

This assumes the default $class_string has been kept.

Actions:
Add a Top Level Menu item and give it 2 x CSS Class of: gp_mega_item menu-item-has-children

This will add a sub-menu item containing a dynamically named hook: gp_mega_item_{slug}

For example:
I give my menu item a label of My Menu
This will return a slug of my-menu
And the function will generate a hook named: gp_mega_item_my-menu

NOTE: if you change the label after saving the slug does not change.

Got it going. Thanks for this post David. I had to spin my wheels for a little bit longer, but I have a container painted as a sub-menu-item. Not totally certain what happened - originally I did not have the sub-menu custom-sub-menu create. Finally got it working, and then hooked in the block element underneath. I have a couple use cases I'm going to prototype out. Now it's time to have fun!!!

Update after some experimentation. Recommend considering this CSS approach:

.gp_mega_item {
position: static !important;
}

#site-navigation .gp_mega_item .sub-menu.custom-sub-menu {
width: max-content;
top: 0;
right: 0;
box-shadow: none !important;
background-color: transparent;
}

This provides the basic environment for the element to display in and shifts all the width control to the element. In the element, set the outer container width in px, em, rem - whatever units you're working in (i.e. 1200px). If the Set up desired width in tablet (i.e. 720px). Hide on mobile in the element's Advanced section. May wish to consider compensating for the header padding that's set in the customizer. Can tinker with the margin values also, especially top margin. Keeps everything nicely packaged and easy to plug into another site.

This also lets you to easily use flex containers inside the element for positioning and responsiveness which takes this to a whole higher level.

@DavidKeevis Thanks for providing the alternate CSS, Seems like your solution prevents other menu items from being selected while a submenu is open. I was also wondering if there was a way to set the sub menu full-width.