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

Question

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

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

视觉上：

-------------------------------------------------- -----------------------
| < | 菜单 1 | 菜单 2 + | 菜单 3 | 菜单 4 | > |
-------------------------------------------------- -----------------------
                      | 菜单 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/