如何在WordPress中将头部二级菜单的长分类列表设置为两列？

方法一：纯CSS搞定（最快最省心） #

大部分主题的下拉菜单容器类是.sub-menu或者.dropdown-menu，直接用CSS的多列布局属性就能实现：

/* 给下拉菜单设置两列 */
.sub-menu {
  column-count: 2;
  column-gap: 20px; /* 列之间留些间距，看着舒服 */
  width: 420px; /* 调整菜单总宽度，适配两列显示 */
}
/* 防止单个菜单项被拆分到两列 */
.sub-menu li {
  break-inside: avoid;
  margin-bottom: 8px; /* 菜单项之间的间距 */
}

把这段代码粘贴到WordPress后台「外观」→「自定义」→「额外CSS」里就行。不知道自己菜单的类名？用浏览器F12打开开发者工具，点击下拉菜单，看HTML结构里的容器类即可。

方法二：修改主题代码（更灵活） #

如果需要更定制化的布局（比如按分类分组），可以手动拆分菜单输出：

1. 找到主题的header.php或者专门的菜单模板文件，找到输出菜单的代码，替换成类似下面的逻辑：

// 获取你的菜单，把'你的菜单ID'换成实际的菜单ID或别名
$menu_items = wp_get_nav_menu_items('你的菜单ID');
// 把菜单分成两半
$split_point = ceil(count($menu_items) / 2);
$col1_items = array_slice($menu_items, 0, $split_point);
$col2_items = array_slice($menu_items, $split_point);
?>
<!-- 两列菜单容器 -->
<div class="dropdown-two-cols">
  <div class="menu-col">
    <?php foreach($col1_items as $item): ?>
      <a href="<?php echo esc_url($item->url); ?>" class="menu-item"><?php echo esc_html($item->title); ?></a>
    <?php endforeach; ?>
  </div>
  <div class="menu-col">
    <?php foreach($col2_items as $item): ?>
      <a href="<?php echo esc_url($item->url); ?>" class="menu-item"><?php echo esc_html($item->title); ?></a>
    <?php endforeach; ?>
  </div>
</div>

2. 再配合CSS让两列并排：

.dropdown-two-cols {
  display: flex;
  gap: 20px;
  width: 420px;
}
.menu-col {
  flex: 1; /* 让两列宽度均等 */
}
.menu-item {
  display: block;
  margin-bottom: 8px;
}

注意点 #

• 不同主题的菜单结构可能不一样，比如有的主题用ul包裹，有的用div，CSS选择器要对应调整。
• 如果菜单里还有三级子菜单，要额外加CSS避免列布局影响子菜单的展开样式。
• 纯CSS方法兼容性拉满，现代浏览器都支持，优先推荐这个。

内容的提问来源于stack exchange，提问作者SANJANA MOHAPATRA