cssOMS/nav.scss

.nav-top {
    user-select: none;
    margin-top: 1rem;
    display: block;

    > li {
        > a {
            //box-shadow: 0 0 3px 1px rgba(90, 71, 114, 0.3);
            border: 1px solid var(--bborder);
            margin-right: .5rem;
            display: inline-block;
            padding: 10px 10px;
        }
    }

    li {
        display: inline-block;
        a {
            background: #fff;
            position: relative;
            cursor: pointer;

            &:hover, &.active, &:focus {
                background: var(--nav-content-hover);
                color: var(--txt-on-bg-c-2);

                > ul {
                    display: block;
                    opacity: 1;
                    visibility: visible;
                }
            }

            > ul {
                padding: 0;
                z-index: 5;
                position: absolute;
                top: 36px;
                left: 0;
                width: 150px;
                display: none;
                opacity: 0;
                visibility: hidden;

                li {
                    display: block;
                    color: #000;
                    padding: 7px;

                    &:hover, &:focus {
                        color: #252525;
                        background: var(--nav-content-hover);
                    }
                }
            }
        }
    }
}

.nav-trigger {
    position: absolute;
    display: none;

    &:checked + nav {
        width: 0%;
    }
}

@media only screen and (max-width: 62em) {
    .nav-trigger:not(:checked) + nav {
        width: 0%;
    }

    .nav-trigger:checked + nav {
        width: auto;
        min-width: 250px;
    }
}

@media only screen and (max-width: 48em) {
    .nav-trigger:checked + nav {
        width: 100% !important;
    }

    .nav-trigger:checked ~ main {
        display: none !important;
    }
}