html - 如何让菜单 UL 彼此相邻？

Question

请查看我想要做什么:codepen.io/samiralley/pen/xvFdc

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

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

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

出于某种原因，我无法让它工作。

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

谢谢，

丹尼

Answer 1

这与您的要求不完全相同，但非常相似。这显示了一些基于可用空间(高度和宽度)的菜单，并带有溢出。尝试以这种方式替换以下类(确保应用所有规则，必要时添加 !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;
}