Javascript 多级选择栏

我试图做一个多级选择栏。但我不知道如何创建这种类型的酒吧。我曾尝试使用常用的导航栏方法，但它并没有按照我想要的方式工作

我想做一些类似的事情，这是供参考的照片：

有什么建议吗？或者类似的例子？（请在小提琴示例中显示。）

---

谢谢大家!

您希望创建一个多级无序列表，其中每个具有子项的列表项都包含另一个无序列表。例如

<ul class="parent">
    <li>
        <a href="#">Category</a>
        <ul class="child">
            <li>
                <a href="#">Sub-category</a>
                <ul class="grandchild">
                    <li>
                        <a href="#">Sub-sub-category</a>
                        <ul class="great-grandchild">
                            <li>
                                <a href="#">sub-sub-sub category</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Sub-category 2</a>
            </li>
        </ul>
    </li>
    <li>Category 2</li>
    <li>Category 3</li>
    <li>Category 4</li>
    <li>Category 5</li>
</ul>

---

嗨@Joe Fitter，如果我想让它可以滚动，在这种情况下它会消失。你可以看到我的例子：首先，这是一个不同的问题，其次，你在另一个问题中的做法与上面的例子非常不同。要解决与其他链接问题相关的问题，您需要结合overflow-x:visible和overflow-y:scroll，这将需要一个父元素添加到html中，如下所述：上面的示例将使用与您链接的问题完全不同的css。谢谢你的帮助！

ul:not('.parent') {
    display: none;
}

ul.parent > li:hover > ul,
ul.child > li:hover > ul,
ul.grandchild > li:hover > ul,
ul.great-grandchild > li:hover > ul {
    display: block;
}