gmx.css/src/_menu.css

A micro Material Design 3 based CSS-only framework.

details .menu {
    position: absolute;
    z-index: 2;
}

.list-box,
.menu {
    background: var(--m3-scheme-surface-container-high);
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.list-box>* {
    padding: 1.15rem 1rem .75rem;
}

.list-box>*>article * {
    margin: 0;
}

.list-box>* i *,
.menu>* i * {
    font-size: 1.5rem;
    margin-right: 1rem;
}

.list-box>*+* {
    border-top: 1px solid var(--m3-scheme-outline-variant);
}

.menu {
    background: var(--m3-scheme-surface-container);
    box-shadow: var(--m3-util-elevation-2);
    font-size: .875rem;
    font-weight: 500;
    border-radius: var(--m3-menu-shape);
    padding: .5rem 0;
    min-width: 7rem;
    max-width: 17.5rem;
}

.menu>* {
    padding: .75rem;
    cursor: pointer;
    transition: .1s;
}