1. 理解WordPress菜单的默认输出结构
在WordPress中，当我们使用wp_nav_menu()函数生成导航菜单时，它会输出一个标准的HTML结构。对于多级菜单，WordPress默认会将所有子菜单（无论层级深浅）都赋予相同的sub-menu类。例如，一个三级菜单的HTML结构可能如下所示：
<ul class="main-menu-links">
<li class="menu-item menu-item-has-children">
<a href="#">主菜单项</a>
<ul class="sub-menu"> <!-- 第一级子菜单 -->
<li class="menu-item">
<a href="#">子菜单项1</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">子菜单项2</a>
<ul class="sub-menu"> <!-- 第二级子菜单 -->
<li class="menu-item">
<a href="#">子菜单项2.1</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">子菜单项2.2</a>
<ul class="sub-menu"> <!-- 第三级子菜单 -->
<li class="menu-item">
<a href="#">子菜单项2.2.1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- ... 其他菜单项 ... -->
</ul>从上述结构可以看出，所有子菜单都只有sub-menu这一个类。这给那些希望通过sub-menu-2、sub-menu-3等不同类名来单独控制各级子菜单样式的开发者带来了挑战。然而，我们可以通过巧妙地运用CSS层级选择器来解决这个问题，而无需依赖WordPress生成不同的类名。
2. 注册和显示WordPress导航菜单
在开始样式定制之前，确保您的WordPress主题已经正确注册并显示了导航菜单。
2.1 注册菜单位置
在您的主题的functions.php文件中，添加以下代码来注册一个菜单位置：
<?php
function my_theme_setup() {
register_nav_menus( array(
'primary-menu' => esc_html__( '主导航菜单', 'mytheme' ),
// 可以注册更多菜单位置
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>这里我们注册了一个名为primary-menu的菜单位置。
2.2 在模板中显示菜单
在您的主题文件（例如header.php）中，使用wp_nav_menu()函数来显示菜单：
<?php
wp_nav_menu(
array(
'theme_location' => 'primary-menu', // 对应上面注册的菜单位置
'container' => false, // 不使用额外的div包裹菜单
'menu_class' => 'main-menu-links', // 为主ul指定类名
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', // 自定义ul的输出
)
);
?>请注意，我们为最外层的ul指定了main-menu-links类，这将作为我们CSS选择器的基础。
3. 使用CSS层级选择器定制多级子菜单样式
由于WordPress为所有子菜单都赋予了sub-menu类，我们需要利用CSS的层级选择器来区分不同深度的子菜单。
3.1 基础子菜单样式与显示逻辑
首先，我们需要定义所有子菜单的通用样式，并设置它们默认隐藏，仅在父级菜单项悬停时显示。
/* 确保所有菜单项都支持相对定位，以便子菜单可以绝对定位 */
.main-menu-links li {
position: relative;
}
/* 所有子菜单的通用隐藏和定位样式 */
.main-menu-links ul.sub-menu {
display: none; /* 默认隐藏 */
position: absolute; /* 绝对定位 */
top: 100%; /* 第一级子菜单通常在父级下方 */
left: 0;
z-index: 999; /* 确保子菜单在其他内容之上 */
min-width: 180px; /* 设置一个最小宽度 */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(to right, #001e3b, #171717); /* 背景颜色 */
border-top: 2px solid #0072dd; /* 顶部边框 */
list-style: none; /* 移除列表样式 */
padding: 0; /* 移除默认内边距 */
margin: 0; /* 移除默认外边距 */
}
/* 子菜单项的样式 */
.main-menu-links ul.sub-menu li {
width: 100%; /* 子菜单项宽度填充父级子菜单 */
position: relative; /* 为下一级子菜单做准备 */
}
/* 子菜单项链接的样式 */
.main-menu-links ul.sub-menu li a {
display: block; /* 让链接填充整个li区域 */
padding: 10px 15px; /* 内边距 */
color: #fff; /* 链接颜色 */
text-decoration: none; /* 移除下划线 */
white-space: nowrap; /* 防止文本换行 */
}
/* 鼠标悬停时显示子菜单 */
.main-menu-links li:hover > ul.sub-menu {
display: block;
}解释：
- main-menu-links li { position: relative; }：这是关键一步，它为所有带有子菜单的li元素提供了定位上下文，使得其子ul.sub-menu可以相对于它进行绝对定位。
- main-menu-links ul.sub-menu：定义了所有子菜单的通用样式，包括默认隐藏、绝对定位、背景、阴影等。
- main-menu-links li:hover > ul.sub-menu：这个选择器确保当鼠标悬停在任何一个父li上时，其直接子元素ul.sub-menu就会显示出来。这个规则的通用性使得它适用于所有层级的子菜单。
3.2 定制第二级子菜单的样式
现在，我们来定制第二级子菜单的样式。第二级子菜单是嵌套在第一级子菜单内部的ul.sub-menu。
/* 第二级子菜单的定位和样式 */
.main-menu-links ul.sub-menu ul.sub-menu { /* 针对嵌套的ul.sub-menu */
top: 0; /* 与父级li顶部对齐 */
left: 100%; /* 出现在父级li的右侧 */
z-index: 1000; /* 比第一级子菜单更高的z-index */
border-radius: 5px; /* 圆角边框 */
/* 可以在这里添加与第一级子菜单不同的背景、边框等样式 */
}
/* 第二级子菜单项的链接样式（如果需要与第一级不同） */
.main-menu-links ul.sub-menu ul.sub-menu li a {
/* 例如：不同的内边距或字体大小 */
padding: 8px 12px;
}解释：
- main-menu-links ul.sub-menu ul.sub-menu：这个选择器精确地选中了嵌套在另一个ul.sub-menu内部的ul.sub-menu，即第二级子菜单。
- top: 0; left: 100%;：这些属性使得第二级子菜单水平展开，紧贴在父级菜单项的右侧。
3.3 定制第三级子菜单的样式
同理，我们可以使用更深的层级选择器来定制第三级子菜单的样式。
/* 第三级子菜单的定位和样式 */
.main-menu-links ul.sub-menu ul.sub-menu ul.sub-menu { /* 针对更深层嵌套的ul.sub-menu */
top: 0; /* 与父级li顶部对齐 */
left: 100%; /* 出现在父级li的右侧 */
z-index: 1001; /* 比第二级子菜单更高的z-index */
/* 可以在这里添加与前两级子菜单不同的背景、边框等样式 */
}
/* 第三级子菜单项的链接样式 */
.main-menu-links ul.sub-menu ul.sub-menu ul.sub-menu li a {
/* 例如：更小的内边距或字体大小 */
padding: 6px 10px;
}解释：
- main-menu-links ul.sub-menu ul.sub-menu ul.sub-menu：这个选择器选中了第三级子菜单。您可以根据需要继续添加更深层级的选择器。
4. 完整的CSS示例
将上述所有CSS规则整合到您的主题样式文件（例如style.css）中：
/* 主菜单容器样式 */
.main-menu-links {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* 示例：如果主菜单是水平排列 */
background: #333; /* 示例背景 */
}
.main-menu-links > li {
position: relative;
padding: 15px 20px;
color: #fff;
}
.main-menu-links > li > a {
color: #fff;
text-decoration: none;
display: block;
}
/* 所有子菜单的通用样式和隐藏规则 */
.main-menu-links li {
position: relative; /* 为子菜单定位提供上下文 */
}
.main-menu-links ul.sub-menu {
display: none; /* 默认隐藏 */
position: absolute;
top: 100%; /* 默认在父级下方 */
left: 0;
z-index: 999;
min-width: 180px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(to right, #001e3b, #171717);
border-top: 2px solid #0072dd;
list-style: none;
padding: 0;
margin: 0;
}
.main-menu-links ul.sub-menu li {
width: 100%;
position: relative; /* 为下一级子菜单做准备 */
}
.main-menu-links ul.sub-menu li a {
display: block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
white-space: nowrap;
}
/* 鼠标悬停时显示任何层级的子菜单 */
.main-menu-links li:hover > ul.sub-menu {
display: block;
}
/* 第二级子菜单的特定样式和定位 */
.main-menu-links ul.sub-menu ul.sub-menu {
top: 0; /* 与父级li顶部对齐 */
left: 100%; /* 出现在父级li的右侧 */
z-index: 1000; /* 更高的z-index */
border-radius: 5px; /* 圆角 */
/* 可以在这里添加与第一级不同的背景、边框等 */
}
/* 第三级子菜单的特定样式和定位 */
.main-menu-links ul.sub-menu ul.sub 
