Html – Drop down box wont move with button when button is moved

// get the dropdown nodeLists
const dropBtns = document.querySelectorAll('.DropDown button');
// iterate over the nodelist 
dropBtns.forEach(btn => {
  // add a mouseover eventListener and pass the event
  btn.addEventListener('mouseover', (e) => {
    // query the Categories within the eventListeners parent element
    // using closest()
    const category = btn.closest('.DropDown').querySelector('.Categories');
    // get the height of the NAV so the dropdowns top position 
    // nca be placed just below the scroller for the NAV buttons
    const navHeight = e.target.closest('.CategoryBlock').getBoundingClientRect().height;
    // skip the elements (buttons) without a dropdown
    if (category) {
      // buffer for elements on the edge of the windows page
      const buffer = 8;
      // get the boundingClientRect for the eventTarget
      const categoryRect = e.target.getBoundingClientRect();
      // get the boundingClientRect for the dropdown elements
      const dropdownWidth = category.getBoundingClientRect().width
      // set the initial left position for elements
      let categoryPosition = categoryRect.left;
      // conditional to check for overflowing dropdown elements
      // is the dropdown elements width overflowing past 
      // the left edge of the window?
      if (window.innerWidth < categoryRect.left + dropdownWidth) {
        // if true, set the right edge of the dropdown element to a
        // buffer set to the left of windows innerWidth
        categoryPosition = window.innerWidth - dropdownWidth - buffer;
        // move any nav buttons overflowed element into view
        btn.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
        // else if the scrolled button is left of the windows fold
      } else if (categoryRect.left < 0) {
        // set the left of the dropdown to the buffer
        categoryPosition = buffer;
        // move any nav buttons overflowed element into view
        btn.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" })
      }
      // pass the left position to a CSS variable using the root 
      // this will be used in CSS to set the .Categories left position
      // var(--scrolled-left)
      document.documentElement.style.setProperty('--scrolled-left', `${categoryPosition}px`);
      // set the position of the top of the dropdown
      // to below the scrollbar on the nav section
      document.documentElement.style.setProperty('--top-pos', `${navHeight + buffer}px`);
    }
  })
})

.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;
  left: var(--scrolled-left);
  top: var(--top-pos);
  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;
}

<nav class="CategoryBlock">
  <div class="DropDown">
    <button>
      Articles
    </button>
    <nav class="Categories">
      <a></a>
      <a href="">Feature articles</a>
      <a href="">Opinion articles</a>
      <a href="">Informative</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
      Short stories
    </button>
    <nav class="Categories">
      <a></a>
      <a href="">Narratives</a>
      <a href="">Retellings</a>
      <a href="">Poetic</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
      Essays
    </button>
    <nav class="Categories">
      <a></a>
      <a href="">Persuassive</a>
      <a href="">Summaries</a>
      <a href="">Book reviews</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
      Debates
    </button>
  </div>
  <div class="DropDown">
    <button>
      Scientific reports
    </button>
    <nav class="Categories">
      <a></a>
      <a href="">Physics</a>
      <a href="">Chemistry</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
      Devlogs
    </button>
    <nav class="Categories">
      <a></a>
      <a href="">Physom</a>
      <a href="">Automatic Page Generator</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
      Programs
    </button>
    <nav class="Categories">
      <a></a>
      <a href="">Physom</a>
      <a href="">Automatic Page Generator</a>
      <a href="">Raytracer</a>
      <a href="">3D renderer</a>
    </nav>
  </div>
  <div class="DropDown">
    <button>
      Math
        </button>
    <nav class="Categories">
      <a></a>
      <a href="">Discrete</a>
      <a href="">Linear Algebra</a>
      <a href="">PreCalculus</a>
      <a href="">Calculus</a>
    </nav>
  </div>
</nav>