.db-events-nav {
    display: grid;
    place-items: center;
}
.db-events-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    width: 100%;
    text-align: center;
    z-index: 1;
}
.db-events-nav > ul {
    grid-auto-flow: column;
    display: flex;
}
.db-events-nav li {
    padding: 0;
}
.db-events-nav a,
.db-events-select-title {
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;    
}
.db-events-select-title:after {
    content: "";
    border: solid #000;
    transform: rotate(45deg) translateY(-50%) translateX(-50%);
    border-width: 0 0.25em 0.25em 0;
    width: 1em;
    height: 1em;
}
.db-events-select {
    position: relative;
    width: 50%;
}
.db-events-select:hover .db-events-select-title:after,
.db-events-select:focus-within .db-events-select-title:after {
    transform: rotate(225deg);
}
.db-events-select:hover .db-events-select-options,
.db-events-select:focus-within .db-events-select-options {
    opacity: 1;
    transform: rotateX(0) translateX(-50%);
} 
.db-events-select-options {
    min-width: 15ch;
    position: absolute;
    top: calc(100% - 0.25rem);
    left: 50%;
    transform: rotateX(-90deg) translateX(-50%);
    transform-origin: top center;
    opacity: 0.3;
    transition: 280ms all 120ms ease-out;
}
.db-events-select-options a {
    display: block;
}

.db-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.db-events:after {
    content: "";
    flex: auto;
    visibility: hidden;
}
.db-events li {
    padding: 0;
    display: none;
}
.db-events li.show {
    display: initial;
}