悬停时，li 项目应占据容器的整个高度

Question

我想让 li 元素的高度与 header 的高度相同。

*,
::before,
::after {
  border-box: box-sizing;
  margin: 0; padding: 0;
}

header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  background: yellow;
  height: 7.5vh;
}

.navigation li {
  display: inline-block;
  padding: 0 1em;
}

.navigation li:hover {
  text-align: center;
  background-color: white;
}

<header>
  <h1>Logo</h1>

  <nav>
    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 1

在.navigation li:hover中添加display:block。

Answer 2

实现此目的的一种方法是利用 line-height 属性并使其与您为 <header> 定义的 height 相同：

.navigation li:hover {
  text-align: center;
  background-color: white;
  line-height: 7.5vh;
}

这是更新后的 CodePen。希望这可以帮助！如果您有任何问题，请告诉我。

悬停时，li 项目应占据容器的整个高度

On hover, li items should take full height of the container

html

css

flexbox