CSS下拉菜单边框与悬停背景未对齐问题求助

安全阿岳

2026-8-17

解决方案

问题根源

在移动端（宽度≤850px）布局中，.dropdown元素设置了左、右、下边框且开启了box-sizing:border-box——这意味着它的100%宽度包含边框宽度。内部的.dropdown li宽度为100%（即.dropdown的内容区域宽度），所以li左侧与.dropdown左侧之间存在2px的边框区域，该区域背景是.dropdown的深色底色。hoverli时，li背景色仅填充自身内容区域，无法覆盖边框区域，就出现了左侧深色线条；同时该边框区域不属于li可点击范围，hover时会触发父元素选中状态。

修复代码

修改移动端媒体查询内的样式，将.dropdown的边框转移到内部li元素上：

@media(max-width: 850px) {
  /* 保留原有其他样式，仅修改以下部分 */
  
  .dropdown {
    position: static;
    width: 100%;
    /* 移除dropdown自身的边框 */
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  
  .dropdown li {
    padding: 0;
    display: block;
    position: static;
    /* 给每个li添加左右边框 */
    border-left: 2px solid var(--accent-color);
    border-right: 2px solid var(--accent-color);
    /* 确保背景色延伸到边框区域（默认已支持，显式设置增强兼容性） */
    background-clip: border-box;
  }
  
  /* 给最后一个li添加下边框，保持原有的底部边框效果 */
  .dropdown li:last-child {
    border-bottom: 4px solid var(--accent-color);
  }
  
  .dropdown li a {
    width: 100%;
    padding: 0;
    justify-content: center;
  }
  
  /* 保留原有其他样式 */
}