Раскрывающийся список не перемещается вместе с кнопкой при перемещении кнопки ⇐ 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