CSS: раскрывающийся список не перемещается вместе с кнопкой при перемещении кнопки ⇐ CSS

[Anonymous]

Код: Выделить всё

.CategoryBlock {
margin-top: 0.5rem;
gap: 1rem;
display: flex;
overflow-x: scroll;
scrollbar-width:thin;
}

.CategoryBlock > *:first-child {
margin-left: auto;
}

.CategoryBlock > *:last-child {
margin-right: auto;
}

.CategoryBlock button {
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size:  2rem;
border: 0;
color:#2e652d;
background-color: white;
position: relative;
}

.CategoryBlock button:hover {
color: #51b44f
}

.Categories {
position: absolute;
display: none;
border: #2e652d;
background-color: hsl(0, 0%, 95%);
border-color: #2e652d;
border-style: solid;
border-width: thin;
max-width: 10rem;
}

.DropDown a {
display: block;
text-decoration: none;
color: #63815f;
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 1.125rem;
margin: 0rem 0.5rem 1rem 0.5rem;
}

.DropDown a:hover {
text-decoration: underline;
}

.DropDown:hover .Categories {
display:block;
}

Код: Выделить всё

Articles



Feature articles
Opinion articles
Informative



Short stories



Narratives
Retellings
Poetic



Essays



Persuassive
Summaries
Book reviews



Debates



Scientific reports



Physics
Chemistry



Devlogs



Physom
Automatic Page Generator



Programs



Physom
Automatic Page Generator
Raytracer
3D renderer



Math



Discrete
Linear Algebra
PreCalculus
Calculus

У меня есть раскрывающийся список, который не перемещается вместе с кнопками при их прокрутке в другое положение. Это связано с тем, что раскрывающийся список является абсолютным, и я понятия не имею, как: сохраните абсолютное поведение, но как бы привяжите его к самой кнопке, а не к ее собственному абсолютному позиционированию. По сути, я хочу создать раскрывающийся список, который находится под кнопкой, но также действует абсолютно и не влияет на поля, я попробовал создать категорию относительный блок, но это просто добавило переполнение, а не тот эффект, который я искал.
Было бы очень полезно, если бы кто-нибудь указал мне в правильном направлении!

Подробнее здесь: https://stackoverflow.com/questions/790 ... n-is-moved