我正在尝试为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),但这是一个选项。
我已经花了很多时间进行测试和测试,但我没有得到任何令人满意的例子。
请建议我如何实现这一目标。
答案 0 :(得分:2)
你可以很容易地做到这一点。
你首先需要使用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/