要使用CSS创建一个多层次的下拉菜单，你可以结合HTML和CSS，利用:hover伪类来控制子菜单的显示和隐藏。下面是一个简单的示例，演示如何创建一个具有两个层级的下拉菜单：
HTML 结构
这是一个基本的HTML结构，包括一个父菜单项和两个子菜单层级：
<ul class="dropdown-menu">
<li>
<a href="#">菜单1</a>
<ul class="submenu">
<li>
<a href="#">子菜单1-1</a>
<ul class="submenu">
<li><a href="#">子子菜单1-1-1</a></li>
<li><a href="#">子子菜单1-1-2</a></li>
</ul>
</li>
<li><a href="#">子菜单1-2</a></li>
</ul>
</li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
CSS 样式
以下CSS将用于实现下拉效果和基本的样式美化：
/* 基础样式 */
.dropdown-menu, .submenu {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-menu a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: white;
background-color: #333;
border: none;
}
.dropdown-menu li {
position: relative;
}
/* 子菜单默认不显示，仅在悬停时显示 */
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 150px;
z-index: 1000;
}
/* 二级子菜单位置调整 */
.submenu .submenu {
top: 0;
left: 100%;
}
/* 悬停显示子菜单 */
.dropdown-menu li:hover > .submenu {
display: block;
}
/* 改变悬停链接的背景颜色 */
.dropdown-menu li:hover > a {
background-color: #555;
}
/* 子菜单项悬停样式 */
.submenu li:hover > a {
background-color: #666;
}
功能说明
HTML 结构：定义了一个嵌套列表，顶级
- 表示主菜单，嵌套的
