.top-nav-menu {
    list-style: none outside none;
    display: inline-table;
    padding: 0;
    margin: 0;
    vertical-align: middle;

    & > li {
        & > a {
            height: 30px;
        }
        & > ul {
            position: absolute;
            list-style: none outside none;
            min-width: 100%;
        }
    }
    li {
        float: left;
        position: relative;
        list-style: none outside none;
        padding: 0;
        margin: 0;

        a {
            display: block;
            padding: 20px 30px;
            transition: padding 0.5s;
            white-space: nowrap;
            text-align: left;
            outline: none;
            font-size: 1rem;
            font-weight: 400;

            &.disabled, &.disabled:hover {
                opacity: 0.5;
            }
            &:hover {
                opacity: 0.75;
                text-decoration: none;
            }
        }
        ul {
            visibility: hidden;
            opacity: 0;
            margin: 0;
            padding: 0;

            li ul {
                position: absolute;
                left: 100%;
                top: 0;
            }
        }
        & > ul li {
            float: none;
            background-color: $primaryBrandColor;

            & a {
                padding: 10px 30px;

                &:hover {
                    background: $secondaryBrandColor;
                    opacity: 1;
                    text-decoration: none;
                }
            }
        }
    }
    ul li:hover > ul {
        visibility: visible !important;
        display: inline-block !important;
        opacity: 1 !important;
    }
    .nav-caret {
        margin-left: 2px;
    }
    .nav-submenu-caret {
        position: absolute;
        right: 15px;
        top: 10px;
        display: inline-block;
        color: $white;

        &:after {
            content: '»';
        }
    }
}