How I can show overflow x to auto and overflow y to visible?

Question

in my case I want to show overflow in horizontal direction to scroll or auto but in vertical direction... I want to visible it without scroll. (may be image clear this). Is here any way to solve it with CSS or JavaScript.

Answer 1

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>