:root {
    --menu-item-spacing: 20px;
    --menu-item-min-width: 175px;
    --brand-dark: #00aeef;
}

.chevron {
    color: #b0b0b0;
}

.nav {
    height: 40px;
}

.nav >ul, .nav >li {
    border-top-left-radius: 10px;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav ul li {
    float: left;
    position: relative;
}


.nav ul li:hover {
    background: var(--brand-dark);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /*a {color: white !important};*/
    /*ul li a { color: white !important;}*/
}

.nav a {
    text-decoration: none;
    color: #000 !important;
    display: block;
    width: fit-content;
    min-width: 100%;
    line-height: 30px;
    text-align: center;
    padding: calc(var(--menu-item-spacing)/4)
             var(--menu-item-spacing)
             calc(var(--menu-item-spacing)/4)
             var(--menu-item-spacing);
}

.nav ul li ul a {
    padding: calc(var(--menu-item-spacing)/4)
             calc(var(--menu-item-spacing)*2.5)
             calc(var(--menu-item-spacing)/4)
             calc(var(--menu-item-spacing)*2.5);
}

.nav li:hover {
    a:visited, a:link {
        color: white !important;
    }
    ul li a:visited, ul li a:link { color: black !important;}
    ul li {
        a:hover {
            color: white !important;
            background: black !important;
        }
    }
}

.nav ul li ul a:link {
    background: #fffbff;
}
.nav ul li ul a:hover {
    border-radius: 0;
}

ul li ul {
    position: absolute;
    left: 0;
    top: 41px;
    visibility:hidden;
    opacity:0;
    transition:visibility 0.15s,opacity .25s;
    border: 1px black solid;
    z-index: 1;
}
ul li:hover>ul {
    visibility:visible;
    opacity:1;
}

ul li ul li, ul li ul li ul li {
    float : none;
    background: #eee;
    margin-top: 0;
    width: fit-content;
    min-width: 100%;
    text-wrap: nowrap;
}

ul li ul li ul, ul li ul li ul li ul {
    position: absolute;
    top: 15px;
    left: calc(100% - (var(--menu-item-spacing)/2) );
    visibility:hidden;
    width: fit-content;
    min-width: 100%;
    opacity:0;
    transition:visibility 0.15s,opacity .3s;
    z-index: 2;
}