WordPress自定义顶部菜单垂直显示失败，CSS设置无效求助

你之前的CSS修改没起作用，是因为找错了调整的目标元素！给容器.top_menu_class加display: inline-block只会改变容器本身的显示方式，而菜单的水平排列是由内部的列表项（<li>）样式控制的。下面是具体的解决步骤：

1. 先确认菜单的HTML结构 #

WordPress的wp_nav_menu生成的结构通常是这样的（你可以用浏览器F12开发者工具查看实际页面结构）：

<div class="top_menu_class">
  <ul class="menu"> <!-- 这个类名可能因主题不同略有变化 -->
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
  </ul>
</div>

菜单水平排列的核心原因，是主题默认给<li>设置了display: inline/inline-block或者float: left属性。

2. 编写正确的CSS规则 #

替换你原来的CSS代码，试试下面的规则：

/* 重置菜单列表的默认样式，消除多余间距和符号 */
.top_menu_class ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

/* 让每个菜单项独占一行，实现垂直排列 */
.top_menu_class li {
  display: block;
  /* 可选：增加项之间的垂直间距，让布局更美观 */
  margin-bottom: 0.5rem;
  /* 如果主题原有样式优先级过高，可添加!important强制覆盖 */
  float: none !important;
}

3. 参考主菜单样式（可选） #

如果你希望这个顶部菜单和主菜单的垂直样式完全一致，可以用开发者工具查看主菜单的CSS规则，把对应的属性复制过来应用到.top_menu_class下的元素上，这样能保证样式统一。

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