移动端hover下拉菜单内容对齐问题修复及下拉样式优化咨询

问题现象 #

现有下拉菜单在桌面端运行正常，移动端屏幕下触发时出现右侧偏移，无法对齐，现象如下：

一、偏移问题修复方案 #

根因 #

1. 父元素.dropdown未设置position: relative，导致绝对定位的下拉菜单是相对于外层位置变化的容器计算偏移，而非绑定在About按钮上
2. 硬编码的left: 40%仅适配桌面端布局，移动端菜单结构变化后偏移值失效

修复代码 #

首先给父元素新增相对定位规则：

.dropdown {
  position: relative;
}

替换原有的.dropdown-content定位相关配置：

.dropdown-content {
  display: none;
  position: absolute;
  width: 100px;
  background: rgba( 255, 255, 255, 0.15 );
  box-shadow: 0 8px 32px 0 rgba( 0,0,0, 0.37 );
  backdrop-filter: blur( 15.0px );
  -webkit-backdrop-filter: blur( 15.0px );
  border-radius: 10px;
  border: 2px solid rgba( 0,230,118, 0.18 );
  z-index: 10;
  /* 替换原有left、top、transform规则 */
  left: 50%;
  top: 100%;
  transform: translateX(-50%) scale(0.8, 0.8);
}

修改后下拉菜单会始终相对于About按钮水平居中、紧贴下方显示，不会随屏幕尺寸变化偏移。

二、原有设计合理性说明 #

原有设计存在以下不合理点：

• 仅依赖hover触发：移动端无鼠标hover事件，触摸场景下大概率无法触发下拉
• 硬编码定位值，跨设备适配性差
• 无触摸兼容、无障碍交互支持

三、移动端适配优化版完整代码 #

CSS代码 #

/* 导航基础布局 */
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.menu_list {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.drop_about {
  cursor: pointer;
  /* 支持focus触发，兼容无障碍 */
  tabindex: 0;
}
.dropdown {
  position: relative;
}
/* 下拉菜单基础样式 */
.dropdown-content {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) scale(0.95);
  width: 120px;
  background: rgba( 255, 255, 255, 0.15 );
  box-shadow: 0 8px 32px 0 rgba( 0,0,0, 0.37 );
  backdrop-filter: blur( 15.0px );
  -webkit-backdrop-filter: blur( 15.0px );
  border-radius: 10px;
  border: 2px solid rgba( 0,230,118, 0.18 );
  z-index: 10;
  transition: all 0.2s ease;
}
.dropdown-content a {
  display: block;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}
.dropdown-content a:hover {
  border-bottom: 1px solid rgba(0,255,0, 0.6);
  background: rgba(0,230,118,0.1);
}
/* 桌面端hover + focus触发 */
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content,
.dropdown.active .dropdown-content {
  display: block;
  transform: translateX(-50%) scale(1);
}
.dropdown:hover .drop_about,
.dropdown:focus-within .drop_about,
.dropdown.active .drop_about {
  color: #00E676;
}
/* 移动端适配（768px以下屏幕） */
@media screen and (max-width: 768px) {
  .menu_list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba( 255, 255, 255, 0.15 );
    backdrop-filter: blur(15px);
    padding: 1.2rem;
    border-radius: 10px;
    gap: 1rem;
    min-width: 120px;
  }
  /* 配合汉堡按钮点击触发菜单显示，JS给main_list加active类即可 */
  .main_list.active .menu_list {
    display: flex;
  }
  /* 移动端下拉菜单右侧对齐，避免超出屏幕 */
  .dropdown-content {
    left: calc(-100% - 0.8rem);
    top: 0;
    transform: scale(1);
  }
  .dropdown:hover .dropdown-content,
  .dropdown:focus-within .dropdown-content,
  .dropdown.active .dropdown-content {
    transform: scale(1);
  }
}

补充JS逻辑（适配移动端触摸点击） #

// 下拉菜单点击切换
document.querySelectorAll('.dropdown').forEach(drop => {
  drop.addEventListener('click', e => {
    e.stopPropagation();
    drop.classList.toggle('active');
  })
})
// 点击页面空白处关闭所有下拉
document.addEventListener('click', () => {
  document.querySelectorAll('.dropdown').forEach(drop => {
    drop.classList.remove('active');
  })
})
// 汉堡菜单触发逻辑（配合原有navTrigger使用）
document.querySelector('.navTrigger').addEventListener('click', () => {
  document.querySelector('.main_list').classList.toggle('active');
})

内容的提问来源于stack exchange，提问作者Pritam Sinha