WordPress+Elementor实现下拉菜单内嵌显示及导航栏底部指针

方法一：Elementor可视化配置（无需代码） #

1. 打开Elementor编辑器，找到导航菜单组件（Nav Menu）
2. 进入样式 > 下拉菜单面板：
   • 调整内边距（Padding）：将下拉菜单的顶部内边距设为负数（比如-20px，数值根据导航栏高度调整），让下拉菜单向上缩进嵌入导航栏内部
   • 找到**指示器（Indicator）**设置：
     • 将指示器的**位置（Position）**设为相对定位，调整top值为100%，使其对齐导航栏底部
     • 微调指示器偏移量，确保精准贴合导航栏底部边缘
3. 进入导航栏 > 样式面板，给导航栏添加足够的底部内边距（比如20px），避免下拉菜单遮挡导航栏内容

方法二：自定义CSS（精准控制） #

如果Elementor可视化设置达不到预期，用自定义CSS覆盖样式：

/* 调整下拉菜单位置，使其嵌入导航栏内部 */
.elementor-nav-menu .sub-menu {
    margin-top: -25px !important; /* 负数数值根据导航栏高度调整 */
    padding-top: 25px !important; /* 抵消负margin，避免内容上移 */
}

/* 调整下拉菜单指示器位置到导航栏底部 */
.elementor-nav-menu .sub-menu:before {
    top: 0 !important; /* 将指示器移到下拉菜单最顶部 */
    transform: translateY(-100%) !important; /* 向上偏移指示器，使其对齐导航栏底部 */
    border-bottom-color: #你的导航栏背景色 !important; /* 匹配导航栏背景，消除空隙 */
}

/* 给导航栏预留空间容纳下拉菜单缩进部分 */
.elementor-nav-menu {
    padding-bottom: 20px !important;
}

注意事项 #

• 负数margin和padding的数值需根据导航栏实际高度微调，建议用浏览器开发者工具（F12）实时预览调整
• 如果导航菜单有自定义类名，需将CSS中的.elementor-nav-menu替换为实际类名
• 指示器边框颜色要和导航栏背景色一致，确保视觉上指针直接贴在导航栏底部

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