Horizontal scroll navigation like facebook or instagram - css

I am having problem with my scroll navigation. or actully i am looking for a solution to mak a horizontal scroll navigation on mobile screen like most of the apps these days. My menu is a mega menu is a mega menu and its working fine on both desktop and mobile. when i use this code to make it horizontly scrollable its not opening the mega menu.

    ul{ /* set's the horizontal layout for the menu */
       white-space: nowrap;
       overflow-x: auto; 
       overflow-y: hidden;
       flex-wrap: inherit !important;
       scrollbar-width: none; /* this will remove scroll-bar for mozilla based browser */
}
    selector ul::-webkit-scrollbar { 
        /* now, let's remove the scroll-bar from the menu */
          display: none; 
        }

Scrollable menu working but not mega menu

if i remove overflow-x or y propertie then mega menu displays its content but the layout is like this. after removing overflow proprtie

My Mega Menu

If you're working on small devices you have to specify the media query like:

@media screen and (max-width: 600px) {  
  .column {    
    width: 100%;
    height: auto;  
  }
}

Have you tried to set max-width and max-height?

You should Google about dropdown menus. This w3schools page explains how to pass it.