如何实现WordPress菜单项显示于其子菜单上方？

嘿，我来帮你搞定这个子菜单位置的问题！默认WordPress的子菜单确实是贴在父菜单项下方的，要把它改到上方其实只需要调整CSS的定位属性就行，结合你现有的代码，我给你一套可行的方案：

首先，先明确你的HTML结构：带有子菜单的<li>里包含了父菜单项的<a>和子菜单的<ul class="sub-menu">，而你的.menu已经设置了position: relative，接下来我们只需要针对菜单项和子菜单做调整：

完整CSS代码调整 #

/* 给所有菜单项设置相对定位，让子菜单能以它为基准定位 */
.menu li {
  position: relative;
  /* 给菜单项添加上下内边距，方便点击也方便子菜单对齐 */
  padding: 12px 18px;
}

/* 核心：调整子菜单的定位到父项上方 */
.menu .sub-menu {
  position: absolute;
  /* 把子菜单的底部对齐父菜单项的顶部，这样就显示在上方了 */
  bottom: 100%;
  left: 0;
  /* 清除默认列表样式 */
  list-style: none;
  padding: 0;
  margin: 0;
  /* 给子菜单加背景色，避免和橙色的父菜单重叠 */
  background-color: #ffffff;
  /* 加个阴影增强层级感 */
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.1);
  /* 如果需要子菜单宽度和父项一致，设置width: 100% */
  width: 100%;
  /* 默认隐藏子菜单，hover时再显示 */
  opacity: 0;
  visibility: hidden;
  /* 添加入场过渡动画，让交互更流畅 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 鼠标悬停父菜单项时，显示子菜单 */
.menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

/* 保留你原来的.menu样式 */
.menu {
  position: relative;
  background-color: orange;
  /* 其他原有样式继续保留 */
}

关键逻辑说明 #

• 给每个<li>设置position: relative，是为了让子菜单.sub-menu能以当前菜单项为基准定位，而不是整个.menu容器。
• 把.sub-menu的bottom: 100%替代默认的top: 100%：100%是相对于父元素（也就是菜单项<li>）的高度，这样子菜单的底部会刚好贴在父菜单项的顶部，自然就显示在上方了。
• 加入opacity和visibility的过渡，是为了避免子菜单突然出现的生硬感，提升用户体验。

额外调整建议 #

• 如果想要子菜单右对齐，把left: 0改成right: 0就行。
• 如果子菜单需要比父菜单项宽，把width: 100%改成固定值（比如width: 220px）。
• 如果你的菜单项有边框或者额外的间距，可以微调bottom的值（比如bottom: calc(100% + 2px)），让子菜单和父项之间留一点空隙。

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