Simple wordpress megamenu

function-menu.php

<?php
/*
 * REGISTER NAVIATION MENUS
 *************************************************************/
add_action( 'after_setup_theme', 'register_make_nav_menus' );
function register_make_nav_menus() {
	register_nav_menus( array(
		'header-menu' => 'Main Header Menu',
	) );
}

class make_submenu_class extends Walker_Nav_Menu {
    /**
     * [start_lvl Starts the list before the elements are added.] 
     * The $args parameter holds additional values that may be used with the child class methods. 
     * This method is called at the start of the output list.
     * The start level refers to the start of a sub-level. Mening that the output does not effect the initial wrapping around the whole navigation, but only the list of childerns children.
     *
     * @param   [string]  &$output  (Required) Used  to append additional content (passed by reference). 
     * @param   [int]     $depth    (Required) Depth of the item.
     * @param   [array]   $args     (Optional) An array of additional arguments. Default value: array()
     *
     */
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $output .= ($depth == 0) ? "<div class=\"megamenu\">\n" : ''; // Wrap the sub-menu items with the megamenu wrapper

        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu\">\n"; // add a numeric value to determin the level of submenu
    }
    public function end_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= ($depth == 0) ? "</div><!-- /.megamenu -->\n" : ''; // Close the megamenu wrapper at the end of the first level
		
    }
    
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;
        $class_names = join( ' ',   apply_filters(
                'nav_menu_css_class',   array_filter( $classes ), $item
            )
        );
        
        ! empty ( $class_names )
        and $class_names = ' class="'. esc_attr( $class_names ) . '"';
        
        if ( in_array( 'featured', $item->classes ) ) {
            // Wrap the featured items to seperate them from the main sub items
            $output .= "</ul>\n<ul class=\"sub-menu-featured\">\n";
        }
        $output .= "<li id='menu-item-$item->ID' $class_names>";

        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $args->after;

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
            ,   $item_output
            ,   $item
            ,   $depth
            ,   $args
        );
    }
    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        if ( in_array( 'featured', $item->classes ) ) {
            // Close off the .feature item
            $output .= "</ul>";
        }
    }
}

/**
* Add the images submenu items with the featured class
*
* @param [array] $items List of menu objects (WP_Post).
* @return [array]
*/
function make_featured_submenu_items( $items ) {
	$featured_item_ids = array();
    //echo '<pre>' . var_export($items, true) . '</pre>';
    foreach ( $items as $item ) {
        if ( $item->menu_item_parent != 0 ) { // Don't add the featured image if it's a parent item.
            if ( in_array( 'featured', $item->classes, true ) 
                    && isset( $item->ID ) 
                        && has_post_thumbnail( $item->object_id )) {

                $item->title = sprintf(
                    '%1$s %2$s %3$s %4$s',
                    '<span class="featured-title">' . $item->title .'</span>',
                    get_the_post_thumbnail( $item->object_id, 'thumbnail', array( 'alt' => esc_attr( $item->title ) ) ),
                    '<span class="featured-excerpt">' . wp_trim_words(get_the_excerpt($item->object_id), 5) . '</span>', // Limit to 5 words, doesn't need to be too lengthy
                    '<a href="' . get_post_type_archive_link( $item->object ) . '">See all ' . $item->type_label . '<span class="arrow-button"></span></a>'
                );
            }
        }
    }

	return $items;
}
add_filter( 'wp_nav_menu_objects', 'make_featured_submenu_items' );

menu-style.scss

//colors
$black: #000;
$color_wild_sand_approx: #f5f4f4;
$color_heath_approx: #581311;
$color_celeste_approx: #ccc;

nav ul {
	> li {
		> a {
			&:hover {
				text-decoration: underline;
				color: $color_heath_approx;
			}
			display: block;
			letter-spacing: 1px;
			padding: 0 30px;
			padding-bottom: 15px;
			color: $black;
			font-weight: bold;
			font-size: 13px;
			text-transform: uppercase;
		}
		&:hover .megamenu {
			display: block;
		}
		display: inline-block;
	}
	.megamenu {
		li a {
			text-align: left;
			vertical-align: top;
			display: inline-block;
			font-weight: normal;
			font-size: 13px;
		}
		position: absolute;
		text-align: center;
		padding: 0;
		left: 0;
		width: 100%;
		background: $color_wild_sand_approx;
		display: none;
		z-index: 300;
	}
	.menu-wrapper {
		ul {
			float: left;
			padding: px(20) 0;
		}
		display: inline-block;
		margin: auto;
	}
	.sub-menu {
		li a {
			&:before {
				content: "";
				background: url(assets/img/arrow/right.svg) no-repeat 50% 50% / contain;
				width: 1.5em;
				height: 1.5em;
				display: inline-block;
				margin-right: .2em;
				margin-bottom: -.4em;
			}
			position: relative;
			vertical-align: middle;
		}
	}
	li.featured {
		a > img,
		a > span {
			display: block;
		}
		.featured-title {
			font-weight: 700
		}
		.featured-excerpt {
			text-transform: none;
		}
		.see-all {
			&:after {
				content: "";
				background: url(assets/img/arrow/right.svg) no-repeat 50% 50% / contain;
				width: 1.5em;
				height: 1.5em;
				display: inline-block;
				margin-right: .2em;
				margin-bottom: -.4em;
			}
			position: relative;
			display: inline-block;
			vertical-align: middle;

		}
		text-align: left;
		border-left: 1px solid $color_celeste_approx;
	}
	text-align: center;
}