Elementor网站垂直导航子菜单位置及箭头对齐问题求助

问题解决代码 #

直接替换你当前的CSS代码为以下内容：

@media all and (min-width:767px){
  /* 主菜单垂直布局与基础对齐 */
  selector{
    writing-mode: vertical-rl;
    transform: scaleX(-1); /* 仅翻转水平方向，避免整体布局混乱 */
    position: relative; /* 为子菜单绝对定位提供参照容器 */
    display: flex;
    align-items: center; /* 让菜单文字与箭头垂直居中 */
  }

  /* 子菜单水平定位到父标签旁 */
  selector .sub-menu {
    position: absolute;
    top: 0;
    left: 100%; /* 子菜单紧贴父菜单右侧 */
    transform: none; /* 取消不必要的旋转，保持水平显示 */
    white-space: nowrap; /* 子菜单文字不换行 */
    margin-left: 8px; /* 可选：调整子菜单与父菜单的间距 */
  }

  /* 箭头与文字精准居中对齐 */
  selector .menu-item-has-children > a > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px; /* 可选：调整箭头与文字的间距 */
  }
}

关键调整说明 #

• 主菜单修正：把原代码的scale(-1)改成scaleX(-1)，只翻转水平方向，避免垂直布局错位；添加position: relative让子菜单的绝对定位有正确参照，不会乱跑；用flex布局直接实现文字和箭头的垂直居中。
• 子菜单定位：取消rotate(90deg)（原旋转会导致子菜单方向混乱），用left: 100%让子菜单刚好贴在父菜单右侧，white-space: nowrap保证子菜单水平排列不折行。
• 箭头对齐：针对Elementor默认的菜单箭头类.icon，用inline-flex布局强制它和文字居中对齐，你可以根据需求调整margin-left控制间距。

额外注意事项 #

• 如果你的主题或Elementor自定义了菜单类名，比如子菜单父项不是menu-item-has-children、箭头不是.icon，需要替换成页面实际对应的类名（可通过浏览器F12开发者工具查看）。
• 微调margin-left的值，能调整子菜单、箭头与文字之间的间距，找到最舒服的视觉效果。

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