CSS3导航子菜单项悬停时出现轻微缩进问题排查求助

问题根因 #

• 二级下拉菜单.secondLevelul未清除浏览器默认的左内边距，大部分浏览器默认给<ul>设置了40px左右的padding-left，导致子菜单项整体右移，悬停时紫色背景仅覆盖子项本身，左侧就会出现明显的缩进留白
• 一级菜单链接.firstLevela的悬停规则修改了宽高，会触发父容器尺寸变化，也可能连带导致二级菜单位置偏移

修复代码 #

你可以直接替换原CSS的对应部分，调整后即可解决缩进问题：

.main-navigation {
  position: absolute;
  right: 0px;
  margin-top: -20px;
  margin-right: 15px;
  width: 2em;
  height: 2em;
  color: #D9D9D9;
  border: 1px solid #D9D9D9;
  align-content: center;
}

.firstLevelul{
  padding-left: 0;
  list-style: none;
  justify-content:flex-end;
  margin: 0;
}

.firstLevela{
  display: block;
  text-align: center;
  font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
  text-decoration: none;
}

.firstLevela:hover{
  color: #D9D9D9;
}

.secondLevelul{
  display: none;
  padding-left: 0;
  list-style: none;
  margin: 0;
  position: absolute;
}

.secondLevela{
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

.secondLevelli:hover{
  background-color: violet;
}

.firstLevelli:hover > .secondLevelul{
  display: block;
  width: 200px;
  background-color: white;
  border: 1px solid #D9D9D9;
  margin-left: -169px;
}

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