submenu.scss

.submenu {
    display: none;
    position: absolute;
    z-index: 3;
    top: 100%;
    @include bidi-style(left, 0, right, auto);
    width: 250px; // fallback, IE & Edge
    padding: 15px;
    border-top: 5px solid $grey-light;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
    background-color: #fff;

    &.submenu-cols-2 {
        width: (250px * 2);
    }

    .submenu-column {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: text-top;
        @include bidi-style(padding-right, $grid-spacing, padding-left, 0);
        width: 250px; // fallback, IE & Edge
    }

    @supports (width: -webkit-max-content) or (width: -moz-max-content) or (width: max-content) {
        &,
        &.submenu-cols-2 {
            @include vendorize-value(width, max-content);
        }

        .submenu-column {
            @include vendorize-value(width, max-content);

            + .submenu-column {
                @include bidi-style(padding-left, ($grid-spacing * 2), padding-right, $grid-spacing);
            }
        }
    }

    .title {
        @include set-heading-font-family;
        @include set-font-size($h4-font-size);
    }

    #{$selector-icon} {
        @include bidi-style(margin-left, 5px, margin-right, 0);
    }

    a {
        display: block;
        padding: 5px 0;
        margin-bottom: 5px;
    }

    #nav-sec & {
        border-top-color: #000;
        @include bidi-style(left, auto, right, auto);
        @include bidi-style(right, 0, left, auto);
    }

    .page-buttons & {
        @include bidi-style(left, auto, right, auto);
        @include bidi-style(right, 0, left, auto);
        border-top: 5px solid $form-border-color;
    }
}

.zone #main-header .submenu a {
    color: $link-color !important; /* stylelint-disable-line declaration-no-important */
}

.submenu-close {
    position: absolute;
    top: 0;
    right: 0;
}

/* not mobile first because this is an exeption for main-header only and it's
easier to strip off the style for the exeption than to add them only for
everything else */
@media #{$mq-mobile-and-down} {
    #nav-sec,
    .nav-main {
        .submenu {
            position: relative;
            width: 100%;
            padding: 0;
            border-top: 0;
            box-shadow: none;

            a {
                display: block;
            }

            .submenu-column,
            &.submenu-cols-2 {
                width: 100%;

                + .submenu-column {
                    @include bidi-style(padding-left, 0, padding-right, 0);
                }
            }
        }
    }
}