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

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.