<div id="scroll-wrap" class="scroll-wrap">
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
  <p class="test">Menu item
    <span class="dropdown">Drop Menu</span>
  </p>
  <p>scroll</p>
  <p>scroll</p>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.scroll-wrap {
  width: 50%;
  margin: auto;
  overflow: auto;
  display: flex;
  border: 5px solid red;
}
.scroll-wrap > * {
  padding: 1rem;
  margin: 0;
}
p {
  white-space: nowrap;
}
.test span {
  display: none;
}
.test:hover span {
  position: absolute;
  border-top:1rem solid transparent;
  margin: 0 0 0 -1rem;
  background: #ccc;
  background-clip:padding-box;
  padding: 5px 1rem;
  display: block;
  z-index:999;
}
.test {
  background: cyan;
}

(function () {
  const scroller = document.querySelector(".scroll-wrap");
  const dropDown = document.querySelectorAll(".dropdown");
  scroller.addEventListener("scroll", checkScroll);

  function checkScroll() {
    for (let i = 0; i < dropDown.length; i++) {
      dropDown[i].style.transform =
        "translateX(-" + scroller.scrollLeft + "px)";
    }
  }
})();