创建一个 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 特性，以把它放置于正确的位置。

以上就是关于css三级菜单怎么做的详细内容，大量欢迎关注php中文网站其他类似文章！