如何使用下拉菜单创建水平滚动菜单？

Question

我正在尝试为具有以下要求的 HTML5 页面构建（可能）纯 CSS 菜单：

• 菜单应该是水平滚动列表（顶部导航栏），带有滚动按钮​​且没有可见的滚动条
• 第一级菜单项可能有子项，例如多个嵌套的下拉菜单

视觉上：

-------------------------------------------------- ---------------------- | | -------------------------------------------------- ---------------------- |菜单 2.1 | -------------- |菜单 2.2 + |--------------- -------------- 菜单 2.2.1 | |菜单 2.1 |--------------- -------------- 菜单 2.2.2 | |---------------

和 > 按钮将主菜单向左或向右滚动（最终打开的子项目应该自己取消删除）。

我也想只使用 CSS（不使用 JavaScript），但这是一个选项。

我已经为此花费了很多时间和测试，但我没有得到任何令人满意的示例。

请建议我如何实现这一目标。

Answer 1

你可以很容易地做到这一点。

你首先需要一个使用 html 列表的树状结构：

<ul class="my-menu">
<li>
    TOP 1
    <ul>
        <li>
            1 - 1 >
            <ul>
                <li>
                    1 - 1 - 1
                </li>
                <li>
                    1 - 1 - 2
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

您需要并排显示第一级才能拥有水平菜单：

ul.my-menu > li {
    display :  inline-block;
}

对于第二层，我们希望它显示在 TOP1 文本的正下方。所以我们会把它放在绝对的：

ul.my-menu > li > ul{
    position : absolute;
}

现在让我们隐藏第二层和第三层。

ul.my-menu > li > ul li{
    display: none;
}

最后我们可以添加悬停逻辑。基本上我们会说如果我的父母“li”悬停然后显示我。

ul.my-menu li:hover > ul > li {
    display: block;
}

当然，您需要在显示器上做更多工作。框的大小和位置非常重要，好像鼠标不会离开父级的边界，这将关闭显示。

这是一个 jsfiddle：https://jsfiddle.net/9mbLabj4/1/