that scrollbar is not suppose to be there and since we are now using javascript so use wheel event to scroll and avoid scrollbar it is the final product i believe what you would like to have
const main = document.querySelector(".wrapper")
main.addEventListener("scroll",e=>{
const subs = main.querySelectorAll(".nav > .each > .sub-menu")
subs.forEach(sub=>{
let parent = sub.closest(".each"),
parentX = parent.getClientRects()[0].x
sub.style.left = parentX + "px"
})
})
main.addEventListener("wheel",e=>{
e.preventDefault()
let speed = 0.4
main.scrollBy(e.deltaY * speed,0)
}).each:hover > .sub-menu {display: block !important;}
.sub-menu{display: none;}
.nav .sub-menu > .each > .sub-menu {
left: 100%;
top:0px;
}
.wrapper {
width: 320px;
overflow-x: hidden;
overflow-y: hidden;
}
.title {width: max-content;}
.each {
background:white;
cursor: pointer;
}
.each:hover {background:rgb(194, 194, 194);}
.nav {border:1px solid black;}<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="wrapper">
<div class="nav flex w-max">
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each">
<div class="title p-1 px-4 border-l">with sub</div>
<div class="sub-menu absolute border">
<div class="each">
<div class="title p-1 px-4">sub menu</div>
<div class="sub-menu absolute border">
<div class="each">
<div class="title p-1 px-4 border-l">2nd sub</div>
<div class="sub-menu absolute border">
<div class="each"><div class="title p-1 px-4 border-l">3rd sub</div></div>
</div>
</div>
</div>
</div>
<div class="each"><div class="title p-1 px-4">2nd menu</div></div>
<div class="each"><div class="title p-1 px-4">2nd menu</div></div>
</div>
</div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
</div>
</div>