创建一个 CSS 三级菜单需要以下步骤：1. 创建嵌套的 HTML 结构，将菜单项分组为父级、二级和三级列表。2. 使用 CSS 样式设置定位、显示和颜色。3. 添加悬停状态，在悬停主菜单项时显示二级菜单，在悬停二级菜单项时显示三级菜单。4. 调整菜单位置以符合设计要求。
如何创建 CSS 三级菜单
步骤 1：创建 HTML 结构
- 制作一个父级
- 为每个主菜单项创建一个
列表项，并为每个项分配一个唯一的 ID。 - 在每个主菜单项
内，创建一个包含子菜单项的二级 - 为每个二级菜单项创建一个
列表项，并为每个项分配一个唯一的 ID。 - 以此类推，为三级菜单项创建三级
列表项。
步骤 2：添加 CSS 样式
- 为父级
position: absolute;或position: relative;。 -
为主菜单项
列表项添加以下样式：立即学习“前端免费学习笔记（深入）”；
display: inline-block;padding: 10px;background-color: #f5f5f5;
-
为二级菜单项
列表项添加以下样式：display: none;position: absolute;width: 200px;background-color: #efefef;
-
为三级菜单项
列表项添加以下样式：display: none;position: absolute;width: 150px;background-color: #e0e0e0;
步骤 3：添加悬停状态
-
为主菜单项
列表项添加悬停状态，以在悬停时显示二级菜单：&:hover > ul { display: block; }
-
为二级菜单项
列表项添加悬停状态，以在悬停时显示三级菜单：&:hover > ul { display: block; }
步骤 4：设置菜单位置
- 根据您的设计调整二级和三级菜单的
top、left和right属性，以将其放置在正确的位置。
