如何将下拉菜单对齐到主菜单项的末端？

看起来你是想让下拉菜单（包括一级和多级子菜单）对齐到对应父菜单项的右侧末端对吧？我来基于你现有的代码做调整，直接修改CSS就能实现：

1. 先给主菜单项添加相对定位 #

首先，我们需要让主菜单项成为下拉菜单的定位参考，这样后续的绝对定位才会基于它来计算，而不是外层容器：

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  position: relative;
}

2. 调整一级下拉菜单（.mega-sub-menu）的对齐 #

原来的一级下拉菜单默认是基于最外层容器左侧对齐的，现在修改定位属性，让它对齐到主菜单项的右侧末端：

#mega-menu-wrap-primary .mega-sub-menu {
  background-color: #2c2c2c;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: absolute;
  right: 0; /* 核心修改：对齐主菜单项右侧 */
  left: auto; /* 覆盖默认的left值，避免冲突 */
}

3. 可选：调整三级子菜单的对齐逻辑 #

如果你的三级子菜单也需要对齐到父菜单项的末端，把原来的left: 100%改成right: 100%，它就会出现在父菜单项的左侧末端；要是你还是希望它在父项右侧延伸，保持left:100%就行：

#mega-menu-wrap-primary ul ul ul .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 100%; /* 改为右侧末端对齐，需要右侧延伸则改回left:100% */
  background: linear-gradient(to bottom, rgb(74, 139, 233), rgb(74, 219, 233));
  list-style: none;
  padding-left: 0;
  margin: 0;
  min-width: 250px;
  z-index: 10000;
}

完整修改后的CSS代码 #

把上述修改整合到你原有代码里，最终代码如下：

#mega-menu-wrap-primary { 
  position: relative; 
  background-color: #1a1a1a; 
  font-family: 'Arial', sans-serif; 
} 

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  position: relative; /* 新增：主菜单项作为定位参考 */
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a { 
  color: white; 
  font-size: 16px; 
  font-weight: bold; 
  text-transform: uppercase; 
  transition: color 0.3s ease; 
} 

/* Hover effect */ 
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a:hover { 
  color: #ff6600; 
} 

/* Dropdown panel */ 
#mega-menu-wrap-primary .mega-sub-menu { 
  background-color: #2c2c2c; 
  padding: 20px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  position: absolute; 
  right: 0; /* 修改：对齐主菜单项右侧末端 */
  left: auto; /* 覆盖默认left值 */
} 

#mega-menu-wrap-primary .mega-sub-menu li { 
  list-style: none; 
  width: max-content; 
} 

/* Dropdown links */ 
#mega-menu-wrap-primary .mega-sub-menu a { 
  color: white; 
  display: block; 
  text-decoration: none; 
  font-size: 14px; 
} 

#mega-menu-wrap-primary .mega-sub-menu a:hover { 
  text-decoration: underline; 
  font-weight: bold; 
  color: white; 
} 

/* Responsive hamburger menu (mobile view) */ 
#mega-menu-wrap-primary .mega-menu-toggle { 
  background-color: #1a1a1a; 
  color: white; 
  border: none; 
} 

#mega-menu-wrap-primary .mega-menu-toggle:hover { 
  color: #ff6600; 
} 

#mega-menu-wrap-primary ul ul ul li { 
  position: relative; 
} 

#mega-menu-wrap-primary ul ul ul .sub-menu { 
  display: none; 
  position: absolute; 
  top: 0; 
  right: 100%; /* 可选修改：对齐父菜单项左侧末端，需右侧延伸则改回left:100% */
  background: linear-gradient(to bottom, rgb(74, 139, 233), rgb(74, 219, 233)); 
  list-style: none; 
  padding-left: 0; 
  margin: 0; 
  min-width: 250px; 
  z-index: 10000; 
} 

#mega-menu-wrap-primary ul ul ul > li:hover .sub-menu { 
  display: block; 
} 

#mega-menu-wrap-primary ul ul ul .sub-menu li { 
  padding-left: 10px; 
} 

#mega-menu-wrap-primary ul ul ul ul ul .sub-menu { 
  z-index: 100; 
} 

#mega-menu-wrap-primary li li.has-children > a:after { 
  content: ' →'; 
  font-size: 15px; 
  vertical-align: 1px; 
}

效果说明 #

• 一级下拉菜单现在会精准对齐到对应主菜单项的右侧末端，不会再和外层容器的左侧绑定
• 三级子菜单的对齐逻辑可以根据你的需求灵活切换，不影响原有hover、响应式菜单的功能
• 所有原有样式效果都完整保留，只是调整了定位规则

内容来源于stack exchange