.menu {
    margin-inline: -1.5em;
}

.menu-button {
    padding: .75em 1.5em;
    user-select: none;
}

    .menu-button:hover {
        background: #00000040;
        cursor: pointer;
    }

.menu-item {
    display: block;
    padding: .75em 1.5em;
}

    .menu-item:hover {
        background: #00000040;
    }

.menu-items {
    height: 0;
    overflow: hidden;
    transition: .5s;
}

    .menu-items.show {
        height: 240px;
    }

@media (min-width: 60em) {
    .menu-button {
        display: none;
    }

    .menu-items {
        display: flex;
        height: auto;
    }

        .menu-items.show {
            height: auto;
        }
}