html - 将鼠标悬停在链接上时如何固定高度

Question

这不是我的实际代码。我正在创建下拉菜单，但我遇到了一个问题，所以我删除了所有代码，这样我就可以用最少的代码来解决我的问题。

我的问题是，当我将鼠标悬停在我的链接上时，我增加了 anchor 标记的字体大小，这很好，但它也增加了 li 元素的高度，这是可以理解的。简而言之，我知道为什么会这样，我只想要解决方案。当我将鼠标悬停在我的元素上时，我想增加字体大小，但不是 li 元素的大小，它是父元素。如果您不明白这个问题，请阅读 CSS 代码中的注释。

I only want to use css for the solution

/*basic style no need to pay attention*/

* {
  font-family: helvetica;
  margin: 0px;
  padding: 0;
  list-style-type: none;
}

.menu {
  display: flex;
}

.menu li {
  flex: 1;
}

ul ul li {
  display: flex;
}

.menu>li a {
  background: black;
}

a {
  display: block;
  width: 100%;
}


/*
    ####
    increase the font size, but not the size for li
    ####*/

a:hover {
  font-size: 26px;
}

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="menu-item-has-children"><a href="#">Services</a>
    <ul class="sub-menu">
      <li><a href="#">Plumbing</a></li>
      <li class="menu-item-has-children"><a href="#">Heating</a>
        <ul class="sub-menu sub-menu2">
          <li><a href="#">Residential</a></li>
          <li><a href="#">Commercial</a></li>
          <li><a href="#">Industrial</a></li>
        </ul>
      </li>
      <li><a href="#">Electrical</a></li>
    </ul>
  </li>
  <li><a href="#">Pricing</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Answer 1

li 高度在变化，因为您的默认 line-height 随文本大小而变化。尝试为您的 li 元素定义 line-height，使它们保持相同的高度。