一、案例描述

使用纯css代码实现多级菜单，方法简单易理解。

二、案例

1.一级菜单

（1）效果演示

利用无序列表和浮动完成此效果，结构简单。

2.二级菜单

（1）效果演示

（2）代码展示

css代码：

<style>.dropdown {width: 400px;border: 1px solid rgba(0, 0, 0, 0.3);display: flex;list-style-type: none;margin: 0;padding: 0;}.dropdown li {padding: 8px;position: relative;}.dropdown ul {border: 1px solid rgba(0, 0, 0, 0.3);display: none;left: 0;position: absolute;top: 100%;list-style-type: none;margin: 0;padding: 0;width: 200px;}.dropdown ul ul {left: 100%;position: absolute;top: 0;}.dropdown li:hover {background-color: rgba(0, 0, 0, 0.1);}.dropdown li:hover>ul {display: block;}
</style>

html代码：

<ul class="dropdown"><li><div>电视剧</div><ul><li>中国</li><li>美国</li><li>韩国</li></ul></li><li>动漫</li><li><div>电影</div><ul><li>《少年的你》</li><li>《奇迹笨小孩》</li><li>《长津湖》</li></ul></li>
</ul>

说明：

默认情况下让所有的二级列表进行隐藏display:none; 鼠标经过一级列表的小li后让当前小li里面的列表进行显示display:block;
如果想让每个模块都是超链接，只需要把div标签换成a标签即可。

3.三级菜单

（1）效果演示

（2）代码展示

css代码还是上述的代码，没有变化。
html代码：

<ul class="dropdown"><li><div>电视剧</div><ul><li>中国</li><li><div>美国</div><ul><li>漫威</li><li>科幻</li></ul></li><li>韩国</li></ul></li><li>动漫</li><li><div>电影</div><ul><li>《少年的你》</li><li>《奇迹笨小孩》</li><li>《长津湖》</li></ul></li>
</ul>

注：只需多次嵌套列表即可，css代码没变化。

4.四级菜单

（1）效果演示

（2）代码展示

html代码：

<ul class="dropdown"><li><div>电视剧</div><ul><li>中国</li><li><div>美国</div><ul><li><div>漫威</div><ul><li>《蜘蛛侠》</li><li>《雷神》</li><li>《钢铁侠》</li></ul></li><li>科幻</li></ul></li><li>韩国</li></ul></li><li>动漫</li><li><div>电影</div><ul><li>《少年的你》</li><li>《奇迹笨小孩》</li><li>《长津湖》</li></ul></li>
</ul>

三、总结

整体代码并不算很多，特别是html结构都是复制出来的。css在最开始写完之后几乎没怎么变，除非我们要把样式变得更加好看。
逻辑如下：
之后，想变成几级列表就变成几级列表，css不需要再变化，只需要html结构进行列表嵌套即可。
此思维可适用于多个地方。

css案例1——一级菜单、二级菜单、三级菜单、四级菜单相关推荐

承装承修承试电力资质一级、二级、三级、四级、五级怎么办理？
许可证分为承装.承修.承试三个类别. 取得承装类许可证的,可以从事电力设施的安装活动,取得承修类许可证的,可以从事电力设施的维修活动,取得承试类许可证的,可以从事电力设施的试验活动 . 承装类承装(修 ...
dropdownlist三级联动怎么实现_简单三步，轻松搞定一级、二级、三级下拉菜单
工作中,为了录入数据方便,数据规范,我们经常采用下拉菜单来制作规范模板,今天,技巧君和大家分享一下一级.二级和三级联动下拉菜单制作方法,文末有示例文件下载方法哦! 下拉菜单示例一级下拉菜单一级下拉 ...
国家信息系统安全等级保护基本要求——等保一级、二级、三级、四级内容
在这里分享下国家信息系统安全等级保护基本要求--等保一级.等保二级.等保三级.等保四级内容,以备查阅及编写单位自用信息安全要求. <信息系统安全等级保护基本要求> 中华人民共和国国家标准G ...
GESP一级、二级、三级、四级样题真题解析
GESP的前世今生 GESP的前世今生_哔哩哔哩_bilibili GESP考试基础知识串讲01 GESP考试基础知识串讲01_哔哩哔哩_bilibili 中国计算机学会CCF编程能力等级认证GESP ...
计算机等级考试，一级，二级，三级，四级，未来教育系统
下载链接: 尽量选择第一个 https://download.csdn.net/download/weixin_40749043/21480571?spm=1001.2014.3001.5503 ht ...
dw二级联动下拉菜单插件宋君墨_Excel实例——一级、二级、多级下拉菜单一次讲透...
啥叫下拉菜单?啥叫一级?二级?多级?你们都在说啥? 一级下拉菜单其实是一级,这里就不再多次强调是一级了,就是下拉菜单! 当需要多人填写,又保证填写规范的时候,下拉菜单使用起来是非常有必要了!两种办法 ...
网络安全NISP证书一级、二级、三级介绍
介绍国家信息安全水平测试(NISP)是中国信息安全测评中心测试.颁证,国家实行网络空间安全人才培养基地经营管理,并授权网安世纪科技有限公司为NISP资格证书管理处. NISP验证分成一级.二级.三 ...
计算机三级上机场,自学通过计算机二级、三级、四级，保研天津大学，证书拿到手软！你被中航大男神圈粉了吗？...
原标题:自学通过计算机二级.三级.四级,保研天津大学,证书拿到手软!你被中航大男神圈粉了吗? 他刻苦努力.勤奋踏实,是学习上的巨人:他团结同学.真诚善良,是生活中的强者.他将自己的真心融于生活中,以公 ...
计算机会计二级科目,(完整版)会计科目一览表(一级科目二级科目三级科目)..pdf...
会计科目一览表会计科目一览表序号序号编号科目编号科目一级科目二级科目三级科目一级科目二级科目三级科目一.资产类一.资产类现金 1 现金 1 1001 1001 ...

css案例1——一级菜单、二级菜单、三级菜单、四级菜单

一、案例描述

二、案例

1.一级菜单

（1）效果演示

2.二级菜单

（1）效果演示

（2）代码展示

3.三级菜单

（1）效果演示

（2）代码展示

4.四级菜单

（1）效果演示

（2）代码展示

三、总结

css案例1——一级菜单、二级菜单、三级菜单、四级菜单相关推荐

最新文章

热门文章