css3鼠标悬停三级菜单代码

在CSS3中，创建鼠标悬停时显示三级菜单通常涉及HTML结构、CSS样式和JavaScript（如果需要动态效果）。这里是一个基本的示例：

**HTML结构：**

<nav>
  <ul class="menu">
    <li><a href="#">一级菜单</a>
      <ul class="sub-menu">
        <li><a href="#">二级菜单</a>
          <ul class="third-menu">
            <li><a href="#">三级菜单项1</a></li>
            <!-- 添加更多三级菜单项 -->
          </ul>
        </li>
        <!-- 添加更多二级菜单项 -->
      </ul>
    </li>
  </ul>
</nav>

**CSS代码：**

.menu ul {
  display: none;
}

.menu li:hover > ul {
  display: block; /* 当鼠标悬停在一级菜单上时，显示二级菜单 */
}

.sub-menu ul {
  display: none;
}

.sub-menu li:hover > ul {
  display: block; /* 当鼠标悬停在二级菜单上时，显示三级菜单 */
}

.third-menu a {
  display: block; /* 展开每个三级菜单项 */
}

这个例子中，当鼠标悬停在一级菜单上时，对应的二级菜单会显示；同样地，当鼠标悬停在二级菜单上时，对应的三级菜单才会展示。

**注意事项：**
- 如果需要更复杂的效果，比如动画过渡，可以添加`transition`或`animation`属性到`.third-menu`。
- 这种静态布局对于大型网站可能会变得难以管理，特别是当菜单项目很多时，考虑使用JavaScript库如jQuery来处理更复杂的交互。