多级选择栏

Question

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

我想做这样的事情，这是参考照片：

有关如何操作的任何建议吗？或者任何类似的例子？ （请在小提琴示例中显示。）

谢谢！

Answer 1

您想要创建一个多级无序列表，每个列表项都有子项，包含另一个无序列表。 E.G。

<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隐藏所有的孩子/孙子等，并在父母身上显示：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;
}