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>

那么您将使用CSS隐藏所有子代/孙代等，并在parent：hover / active上显示它们

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;
}