Create a sub menu item container with action hook (Mega Menu with GeneratePress and GenerateBlocks)

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">
	<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;
}

Got it going and I really like it. Thanks for this post Sam and the additional CSS from Alin.

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.

Addendum to the css I initially posted above for mouse hover over activates menu:
If you select in generate press the option for the nav menu to activate on mouse hover and your add any value to ”top”, the menu will instantly disappear when trying to move over it.

You can remove top or if you still want some space between the dropdown and the menu (as in the picture above), add instead ”padding-top” and it work that way.

Hi Alin - Working on a newer implementation and noted your comment about the hover event. You can add a value to the top property. However, this value cannot be greater than the value set in the Menu Item Height property of the navigation element you're working with - typically Primary Nav. The key factor is the mouse pointer focus must transition from the menu item to the submenu item without a gap. Thanks for your additional CSS - I'm tweaking on some things that are proving to be really nice.