CSS: Выпадающий список не перемещается вместе с кнопкой, когда кнопка перемещается

.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;
}

<-css
html->

 <nav class="CategoryBlock">

      <div class="DropDown">
        <button>
          Статьи
        </button>
        <nav class="Categories">
          <a></a>
          <a href="">Статьи о событиях</a>
          <a href="">Статьи мнений</a>
          <a href="">Информативные</a>

        </nav>
      </div>

      <div class="DropDown">
        <button>
          Короткие рассказы
        </button>
        <nav class="Categories">
          <a></a>
          <a href="">Нарративы</a>
          <a href="">Пересказы</a>
          <a href="">Поэтические</a>

        </nav>
      </div>

      <div class="DropDown">
        <button>
          Эссе
        </button>
        <nav class="Categories">
          <a></a>
          <a href="">Убеждающее</a>
          <a href="">Резюме</a>
          <a href="">Обзоры книг</a>

        </nav>
      </div>

      <div class="DropDown">
        <button>
          Дебаты
        </button>
      </div>

      <div class="DropDown">
        <button>
          Научные отчеты
        </button>
        <nav class="Categories">
          <a></a>
          <a href="">Физика</a>
          <a href="">Химия</a>

        </nav>
      </div>

      <div class="DropDown">
        <button>
          Девлоги
        </button>
        <nav class="Categories">
          <a></a>
          <a href="">Физом</a>
          <a href="">Автоматический генератор страниц</a>

        </nav>
      </div>

      <div class="DropDown">
        <button>
          Программы
        </button>
        <nav class="Categories">
          <a></a>
          <a href="">Физом</a>
          <a href="">Автоматический генератор страниц</a>
          <a href="">Raytracer</a>
          <a href="">3D рендерер</a>

        </nav>
      </div>

      <div class="DropDown">
        <button>
          Математика
        </button>
        <nav class="Categories">
          <a></a>
          <a href="">Дискретная</a>
          <a href="">Линейная алгебра</a>
          <a href="">Предкалькулус</a>
          <a href="">Калькулус</a>


        </nav>
      </div>
    </nav>


  </header>
  <hr> 

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

Будет очень полезно, если кто-то укажет мне правильное направление!