在WordPress网站设计中，导航菜单的布局直接影响用户体验。默认情况下，二级菜单（子菜单）通常以下拉列表的形式展示，但有时我们希望二级菜单能够并排显示，以提升页面的美观性和易用性。本文将介绍如何通过CSS和插件两种方式实现WordPress二级菜单的并排显示。
方法一：通过CSS实现二级菜单并排
进入WordPress后台 登录WordPress后台，依次点击 外观 > 自定义 > 额外CSS，进入自定义CSS编辑界面。
添加CSS代码 在CSS编辑框中输入以下代码，调整子菜单的显示方式：
.sub-menu {
display: flex !important;
flex-wrap: wrap;
position: static !important;
width: 100%;
}
.sub-menu li {
float: none;
display: inline-block;
margin: 0 10px;
}
这段代码会让子菜单以弹性布局（Flexbox）方式排列，并取消默认的下拉效果，使子菜单项水平并排显示。
- 保存并预览 点击 发布 按钮，刷新网站前台查看效果。
方法二：使用插件实现二级菜单并排
如果不想手动修改代码，可以使用插件快速实现二级菜单并排，推荐以下两款插件：
- Max Mega Menu
- 安装并激活插件后，进入 Max Mega Menu 设置。
- 选择需要修改的菜单，启用 Mega Menu 功能。
- 在布局选项中，设置子菜单为 网格布局 或 水平排列。
- Menu Icons
- 该插件不仅可以添加图标，还能通过CSS类调整菜单样式。
- 在菜单编辑界面，为子菜单项添加自定义CSS类（如
inline-submenu），然后在 额外CSS 中添加样式代码：
.inline-submenu .sub-menu {
display: flex;
flex-direction: row;
}
注意事项
- 不同WordPress主题的菜单结构可能不同，如果上述CSS无效，建议使用浏览器开发者工具（F12）检查菜单的HTML结构，调整对应的CSS选择器。
- 如果使用插件，建议先备份网站数据，避免兼容性问题。
通过以上方法，你可以轻松实现WordPress二级菜单的并排显示，提升网站导航的视觉效果和用户体验！
