导航子菜单响应式对齐问题：屏幕缩放时错位求助

问题根源 #

你的子菜单对齐失效，核心原因是用了固定像素的横向偏移（transform: translateX(-138px)），这种硬编码值无法适配不同屏幕宽度；另外子菜单的定位逻辑没有充分利用父元素的相对定位特性，导致布局错位。

修复步骤及代码调整 #

只需要修改导航子菜单相关的CSS规则，移除固定偏移并修正定位逻辑：

/* 替换原有的.sub-menu相关样式 */
nav .has-submenu .sub-menu {
  display: none;
  position: absolute;
  width: 100%; /* 继承父菜单项宽度 */
  top: 100%; /* 紧贴父菜单项底部 */
  left: 0; /* 与父菜单项左对齐 */
  background-color: black;
  margin: 0;
  padding: 0;
}

nav .has-submenu:hover .sub-menu {
  display: block;
}

nav .has-submenu .sub-menu li {
  width: 100%;
}

nav .has-submenu .sub-menu a {
  height: auto;
  padding: 0.8rem 0; /* 调整内边距优化点击区域 */
  background-color: black;
  transition: background-color 0.3s ease;
}

nav .has-submenu .sub-menu a:hover {
  background-color: #FF7415;
}

修复说明 #

1. 移除固定的translateX偏移，改用left: 0和top: 100%让子菜单基于父li（已设置position: relative）精准定位
2. 子菜单宽度设为100%，完全继承父菜单项的宽度，确保对齐
3. 调整子菜单链接的内边距，优化移动端的点击体验
4. 删除重复的position: absolute定义，简化样式逻辑

修改后，子菜单会在任何屏幕尺寸下都与父菜单项完全对齐，hover时正常显示。

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