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

Question

我的滚动导航有问题。或者实际上，我正在寻找一种解决方案，以便像当今大多数应用程序一样在移动屏幕上制作 水平滚动导航 。我的菜单是一个巨型菜单是一个巨型菜单，它在桌面和移动设备上都能正常工作。当我使用此代码使其水平滚动时，它不会打开 大型菜单 。

    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 页面解释了如何通过它。

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

Horizontal scroll navigation like facebook or instagram - css

html

javascript

css

wordpress

megamenu