.menu {
    overflow: hidden;
    background-color: var(--theme-base-color);
    color: white;
}

    .menu a, .menu a:visited, .menu a:link {
        background-color: inherit;
        float: left;
        text-align: center;
        padding: 6px 8px;
        text-decoration: none;
        color: white;
    }

.subnav, .subnav2, .subnav3 {
    float: left;
    overflow: hidden;
    background-color: inherit;
}

.menu a:hover {
    color: lightgray;
    text-decoration: none;
    background-color: inherit;
}

.subnav-content {
    display: none;
    position: absolute;
    z-index: 1;
    margin-top: 30px;
    margin-left: 0px;
}

.subnav2-content {
    display: none;
    position: absolute;
    z-index: 1;
    margin-top: 30px;
    margin-left: 0px;
}

.subnav3-content {
    display: none;
    position: absolute;
    z-index: 1;
    margin-top: 30px;
    margin-left: 0px;
}

    .subnav-content a, .subnav2-content a, .subnav3-content a {
        color: gray;
        float: left;
        text-decoration: none;
    }

        .subnav-content a:hover, .subnav2-content a:hover, .subnav3-content a:hover {
            color: lightgray;
            text-decoration: none;
        }

.subnav:hover .subnav-content, .subnav2:hover .subnav2-content, .subnav3:hover .subnav3-content {
    display: block;
    color: lightgray;
    background-color: inherit;
    border: 1px solid lightgray;
}