水平滚动导航，如 facebook 或 instagram - css

Question

我的滚动导航有问题。或者实际上我正在寻找一种解决方案，以在移动屏幕上制作水平滚动导航，就像这些天的大多数应用程序一样。 我的菜单是一个超级菜单是一个超级菜单，它在桌面和移动设备上都可以正常工作。 当我使用此代码使其水平滚动时，它不会打开 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

如果我删除 overflow-x 或 y 属性，然后大型菜单会显示其内容，但布局是这样的。 after removing overflow proprtie

My Mega Menu

Answer 1

如果您使用的是小型设备，则必须指定媒体查询，例如：

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

你试过设置max-width和max-height吗？

您应该在 Google 上搜索下拉菜单。这个w3schools 页面解释了如何通过它。