当我将鼠标悬停在nav部件的第一个ul的主图标上时，下拉菜单出现在完美的位置，然而，当我将鼠标悬停在子菜单项上时，出现了轻微的压痕，我似乎找不到原因。
悬停在三个点“...”图标上：

将鼠标悬停在菜单的子项上：

你可以清楚地看到缩进时，我悬停在子菜单，我的颜色紫罗兰色悬停，这正是当缩进将发生。

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

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

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

.firstLevela:hover{
  color: #D9D9D9;
  width: 1.5em;
  height: 1.5em;
}

.secondLevelul{
  display: none;
}

.secondLevela{
  display: block;
}

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

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

<nav class="main-navigation">
  <ul className="firstLevelul">
    <li className="firstLevelli">
      <a href="#" className="firstLevela"><MoreHorizIcon className="editDropDownIcon" /></a>
      <ul className="secondLevelul">
        <li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
        <li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
        <li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
      </ul>
    </li>
  </ul>
</nav>