Basic CSS Mega Nav for extending

navigation.liquid

<style>
/* MAIN NAVIGATION */
.site-nav__list {
	margin: 0;
	padding: 0;
	text-align: center;
}

.site-nav__item {
	display: inline-block;
	list-style-type: none;
	position: static;
}

.site-nav__item:hover > .sub-nav,
.site-nav__item:hover > .mega-nav {
	opacity: 1;
	visibility: visible;
	overflow: visible;
}

@include media-query($medium-down) {
	.site-nav__item {
		display: block;
	}
}


/* SUB & MEGA CONTAINERS */
.sub-nav,
.mega-nav {
	position: absolute;
	display: block;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	background: gray;
}

.sub-nav {
	width: 225px;
}

.mega-nav {
	width: 100%;
	left: 0;
}

@include media-query($medium-down) {
	.sub-nav {
		width: 100%;
		left: 0;
	}
}



/* NAV GROUP */
.nav-group {
	float: left;
	padding: 20px;
}

.nav-group--single {
	width: 20%;
}

.nav-group--double {
	width: 40%;
}

.nav-group__title {
	margin: 0;
	padding: 0 0 5px 0;
	text-align: left;
}

@include media-query($medium-down) {
	.nav-group--single,
	.nav-group--double {
		width: 100%;
	}
}


/* SUB MENU */
.sub-nav__list {
	margin: 0;
	padding: 0;
	text-align: left;
}

.sub-nav__item {
	list-style-type: none;
	text-align: left;
}

.sub-nav__link {
	padding: 5px 0;
	display: block;
}

.sub-nav__item--single {
	width: 100%;
}

.sub-nav__item--double {
	width: 50%;
	float: left;
}
</style>

<nav class="nav js-menu-nav">

    <ul class="nav__list">
        {% assign menu = linklists.main-menu %}
        {% for link in menu.links %}
            <li class="nav__item">
                <a class="nav__link" href="{{ link.url }}">{{ link.title }}</a>
                {% if link.levels == 1 %}
                <div class="nav__submenu">
                <div class="menu-group">
                    <ul class="menu-group__list">
                        {% for sub_link in link.links %}
                        <li class="menu-group__item"><a class="menu-group__link" href="#">{{ sub_link.title }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                </div>
                {% elsif link.levels > 1 %}
                <div class="nav__megamenu">
                    <div class="grid">
                        <div class="grid__item">
                            <div class="page-width">
                                {% for sub_link in link.links %}
                                
                                {% assign group = 'menu-group-single' %}
                                {% assign item = 'menu-group__item-single' %}

                                {% if sub_link.links.size > 8 %}
                                    {% assign group = 'menu-group-double' %}
                                    {% assign item = 'menu-group__item-double' %}
                                {% endif %}
                                <div class="menu-group {{ group }}">
                                    <p class="menu-group__title">{{ sub_link.title }}</p>
                                    <ul class="menu-group__list">
                                        {% for sub_sub_link in sub_link.links %}
                                        <li class="menu-group__item {{ item }}"><a class="menu-group__link" href="#">{{ sub_sub_link.title }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>