<div class="position-relative">

	<nav class="m-nav-header">
		<ul class="m-nav-header__list">
			<li class="m-nav-header__item">
				<a href="#" class="m-nav-header__link m-nav-header__link--active">Menu 01</a>
				<!-- Skip the closing tag -->
			<li class="m-nav-header__item">
				<a href="#" class="m-nav-header__link">Menu 02</a>
				<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 01</a>
							</li>
							<li class="m-nav-mega__item">
								<a href="#" class="m-nav-mega__link">Menu 02</a>
							</li>
						</ul>
					</li>
				</ul>
				<!-- Skip the closing tag -->
			<li class="m-nav-header__item m-nav-header__item--parent">
				<a href="#" class="m-nav-header__link">Menu 03</a>
				<ul class="m-nav-dropdown jq_dropdown">
					<li class="m-nav-dropdown__item">
						<a href="#" class="m-nav-dropdown__link">Menu 01</a>
					</li>
					<li class="m-nav-dropdown__item m-nav-dropdown__item--parent">
						<a href="#" class="m-nav-dropdown__link">Menu 02</a>
						<ul class="m-nav-dropdown jq_dropdown">
							<li class="m-nav-dropdown__item">
								<a href="#" class="m-nav-dropdown__link">Menu 03</a>
							</li>
							<li class="m-nav-dropdown__item">
								<a href="#" class="m-nav-dropdown__link">Menu 04</a>
							</li>
						</ul>
					</li>
				</ul>
				<!-- Skip the closing tag -->
			<li class="m-nav-header__item">
				<a href="#" class="m-nav-header__link">Menu 04</a>
				<!-- Skip the closing tag -->
		</ul>
	</nav>

</div>

@import "molecules/nav-dropdown/index";

@import "molecules/nav-mega/index";

.m-nav-header {

    font-size: 0;

    &__list {

        @include font-size(medium);
        color: color('black');
        list-style: none;

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

            @include font-size(small);
            display: inline-block;
            margin-left: em(-15px);
            margin-right: em(-15px);

        }

        @media(min-width: breakpoint-min(xl)) {

            @include font-size(normal);

        }

    }

    &__item {

        margin: em(10px) 0;

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

            display: inline-block;
            line-height: 40px;
            margin: 0;
            padding-left: em(15px);
            padding-right: em(15px);

        }

        &--parent {

            position: relative;

        }

    }

    &__link {

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

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

            color: color('black');

        }

    }

}

import 'molecules/nav-dropdown';