如何让菜单 UL 彼此相邻？

Question

请查看我要做什么：codepen。io/samiralley/pen/xvFdc

如何让导航栏下拉菜单显示在列中？

将鼠标悬停在 'Hard Goods' 上，您会看到许多部分，例如 'Ashes Caskets' 和 'Wood Products'。我希望每个部分都并排放置，当它连续到 5 个时，就进入新的一行。

我知道宽度将设置为 20%，这将允许 5 成为 100%。

出于某种原因，我无法使用它。

有很多 CSS 类所以我认为只使用 Chrome 的检查元素会更容易？

谢谢，

丹尼

Answer 1

这与您的要求不完全相同，但非常相似。这显示了一些基于可用 space（高度和宽度）的菜单，并带有溢出。尝试以这种方式替换以下 class（确保应用所有规则，必要时添加 !important）。也许不是你想要的，但可以作为一个起点。

.site-nav--has-grandchildren {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    position: fixed;
    max-width: 90%;
    max-height: 80%;
    overflow: auto;
    min-width: unset;
}

如何让菜单 UL 彼此相邻？

How to get menu UL to sit next to each other?

html

css

liquid

shopify