<div class="position-relative"> Parent Item <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>
</div>

<hr>

<div class="float-right position-relative"> Parent Item <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>
</div>

.m-nav-dropdown {

    $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;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: space(2) 0 0;
        position: absolute;
        text-align: left;
        top: 100%;
        transition: opacity $base-transition;
        visibility: hidden;
        width: 20rem;
        z-index: -1;

        :hover > & {

            opacity: 1;
            visibility: visible;
            z-index: 1;

        }

        @at-root {

            .no-js {

                #{$self} {

                    left: auto;
                    right: 0;

                    #{$self} {

                        left: auto;
                        right: 100%;

                    }

                }

            }

        }

        &[data-align="right"] {

            left: auto;
            right: 0;

            #{$self} & {

                left: auto;
                right: 100%;

            }

        }

        &__item {

            background: color('white');
            border: 1px solid;
            border-bottom: 0;
            border-top: 0;
            line-height: line-height(normal);
            margin: 0;
            padding: 0;

            &:last-child {

                border-bottom: 1px solid;

                #{$self}__link {

                    padding-bottom: em(20px);

                }

            }

            &--parent {

                position: relative;

                > #{$self}__link {

                    @include caret(3px, right);

                    &:after {

                        vertical-align: middle;
                    }

                }

            }

        }

        &__link {

            padding: em(15px 20px);

        }

        #{$self} {

            left: 100%;
            padding-top: 0;
            top: 0;

            #{$self}__item {

                &:first-child {

                    border-top: 1px solid;

                }

            }

            #{$self} {

                display: none;

            }

        }

    }

}

import $ from 'jquery';

export default class DropDown {
	constructor() {
		if (this.test()) {
			this.align();

			$(window).resize(this.align);
		}
	}

	test() {
		return $('.jq_dropdown').length ? true : false;
	}

	align() {
		var maxWidth = $(window).width();

		$('.jq_dropdown').each(function() {
			var $el = $(this);

			$el.removeAttr('data-align');

			if ($el.offset().left + $el.outerWidth() >= maxWidth) {
				$el.attr('data-align', 'right');
			}
		});
	}
}

$(window).on('load', () => new DropDown());