Question

我正在尝试为HTML5页面构建一个（可能的）仅CSS菜单，其中包含以下要求：

菜单应为水平滚动列表（顶部导航栏），滚动按钮且无可见滚动条
第一级菜单项可以包含子项，例如多个嵌套下拉菜单

目视：

-------------------------------------------------------------------------
| < |     Menu 1    |     Menu 2 +  |     Menu 3    |     Menu 4    | > |
-------------------------------------------------------------------------
                      | menu 2.1   |
                      --------------
                      | menu 2.2 + |---------------
                      --------------  menu 2.2.1  |
                      | menu 2.1   |---------------
                      --------------  menu 2.2.2  |
                                   |---------------

其中＆lt; 和＆gt; 按钮向左或向右滚动主菜单（最终打开的子项应 undrop 本身）

我也想只使用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;
}

现在让我们隐藏第二个＆amp;第三级。

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

最后我们可以添加悬停逻辑。基本上我们会说如果我的父母＆＃34; li＆＃34;徘徊然后显示我。

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

当然，你需要在显示器上做更多工作。尺寸＆amp;盒子的位置是非常重要的，好像不是鼠标将离开将关闭显示器的父母的bounderies。

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

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

1 个答案: