<header class="position-relative">
	<ul>
		<li class="float-left mt-0"> Default Style <ul class="m-nav-mega">
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 01</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 01</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 02</a>
						</li>
					</ul>
				</li>
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 02</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 03</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 04</a>
						</li>
					</ul>
				</li>
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 03</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 05</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 06</a>
						</li>
					</ul>
				</li>
				<li class="m-nav-mega__item m-nav-mega__item--parent">
					<a href="#" class="m-nav-mega__link">Megamenu 04</a>
					<ul class="m-nav-mega">
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 07</a>
						</li>
						<li class="m-nav-mega__item">
							<a href="#" class="m-nav-mega__link">Menu 08</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="float-left mt-0 ml-3"> Inline Style <ul class="m-nav-mega m-nav-mega--inline">
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 01</a>
				</li>
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 02</a>
				</li>
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 03</a>
				</li>
				<li class="m-nav-mega__item">
					<a href="#" class="m-nav-mega__link">Megamenu 04</a>
				</li>
			</ul>
		</li>
	</ul>
</header>

.m-nav-mega {

    $self: &;

    border-right: 1px solid;
    color: color('gray');
    display: block;
    list-style: none;
    margin: space(1) 0 0;
    padding: 0 space(2) 0 0;

    & & {

        margin-top: space(1);

    }

    &__link {

        @include text-underline(none, underline);
        color: color('black');
        display: block;

        &:hover,
        &:focus,
        &--active {

            color: color('black');

        }

    }

    @media(min-width: breakpoint-min($menu-breakpoint)) {

        border: 0;
        display: none;
        flex-wrap: wrap;
        left: 0;
        margin: -1px 0 0;
        overflow: hidden;
        padding: space(2) 0 0;
        position: absolute;
        text-align: left;
        width: 100%;
        z-index: 1;

        &:after {

            background: color('white');
            border: 1px solid;
            border-top: 0;
            bottom: 0;
            content: '';
            left: 0;
            position: absolute;
            right: 0;
            top: space(2);
            z-index: -1;

        }

        :hover > & {

            display: flex;

        }

        &__item {

            flex-grow: 1;
            line-height: line-height(normal);
            margin: 0;
            padding: em(10px 20px);

            &--parent {

                #{$self}__item {

                    padding: 0;

                }

                > #{$self}__link {

                    @include font-family(first, bold);

                }

            }

        }

        &__link {

            padding: em(5px 0);

        }

        #{$self} {

            display: block;
            margin: 0;
            opacity: 1;
            padding: 0;
            position: static;
            visibility: visible;

            &:after {

                display: none;

            }

        }

        &--inline {

            justify-content: center;

            #{$self} {

                display: none;

                &__item {

                    flex-grow: unset;
                    padding: 0 space(1);

                }

            }

        }

    }

}