html - 为什么类为 "subnav"的 ul 没有变大？

Question

类为“subnav”的 ul 应该更大。我注意到它是因为背景颜色只显示在一个小区域。如果我将 nav ul li 悬停在“subnav”ul 上，则 ul 不会离开导航。奇怪的是，li a inside "subnav"显示正确并且在 nav 之外很好。只有当我给“子导航”一个特定的高度时，它才会超出导航。

header {
  background-image: url("../images/header.jpg");
  background-size: cover;
  background-position: 0 -15vh;
  background-repeat: no-repeat;
  height: 40vh;
  display: flex;
  align-items: flex-end;
}

nav {
  width: 100%;
  height: 10vh;
  background-color: rgba(255, 255, 255, 0.75);
}

nav ul {
  height: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  align-items: center;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: #1b1a5c;
}

nav ul li .far {
  margin-right: 0.5em;
  color: #1b1a5c;
}

nav ul li .fas {
  margin-right: 0.5em;
  color: #1b1a5c;
}

#logo {
  height: 100%;
}

#logo img {
  max-height: 100%;
}

.subnav {
  display: none;
  position: absolute;
  background-color: #b18e4a;
  width: 80%;
  transform: translateX(10%);
  padding: 0.8em;
  z-index: 1;
}

.subnav li {
  margin: 0.4em;
}

.subnav li a {
  color: white;
}

.subnav li a:hover {
  color: #1b1a5c;
}

nav ul li:hover .subnav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

<header>
  <nav>
    <ul>
      <li id="logo">
        <a href="index.html"><img src="images/salonorchesterlogo.png" alt="Logo des Salonorchester Zürich Oberland"></a>
      </li>
      <li><a href=""><i class="far fa-calendar-alt"></i>Konzerte</a>
        <ul class="subnav">
          <li><a href="konzerte_kalender.html">Kalender</a></li>
          <li><a href="">Billette</a></li>
        </ul>
      </li>
      <li><a href=""><i class="far fa-newspaper"></i>News</a></li>
      <li><a href=""><i class="fas fa-info"></i>Über uns</a>
        <ul class="subnav">
          <li><a href="ueber_uns_orchester.html">Orchester</a></li>
          <li><a href="">Vorstand</a></li>
          <li><a href="">Dirigent</a></li>
          <li><a href="ueber_uns_kontakt.html">Kontakt</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

Answer 1

您在 nav ul 选择器中设置的 height: 100% 属性针对 nav 内的顶级 ul 以及您的 ul.subnav。您可以将 nav ul 更改为 nav > ul 如果您希望它仅特定于顶级 ul 或者您可以覆盖.subnav block 中的那个高度:

.subnav {
  display: none;
  position: absolute;
  background-color: #b18e4a;
  width: 80%;
  transform: translateX(10%);
  padding: 0.8em;
  z-index: 1;
  height: auto; /* ADD THIS TO OVERRIDE HEIGHT: 100% SET IN `nav ul` block */
}

您可以在下面的代码片段中看到这一点:

header {
  background-image: url("../images/header.jpg");
  background-size: cover;
  background-position: 0 -15vh;
  background-repeat: no-repeat;
  height: 40vh;
  display: flex;
  align-items: flex-end;
}

nav {
  width: 100%;
  height: 10vh;
  background-color: rgba(255, 255, 255, 0.75);
}

nav ul {
  height: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  align-items: center;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: #1b1a5c;
}

nav ul li .far {
  margin-right: 0.5em;
  color: #1b1a5c;
}

nav ul li .fas {
  margin-right: 0.5em;
  color: #1b1a5c;
}

#logo {
  height: 100%;
}

#logo img {
  max-height: 100%;
}

.subnav {
  display: none;
  position: absolute;
  background-color: #b18e4a;
  width: 80%;
  transform: translateX(10%);
  padding: 0.8em;
  z-index: 1;
  height: auto; /* ADD THIS TO OVERRIDE HEIGHT: 100% SET IN `nav ul` block */
}

.subnav li {
  margin: 0.4em;
}

.subnav li a {
  color: white;
}

.subnav li a:hover {
  color: #1b1a5c;
}

nav ul li:hover .subnav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

<header>
  <nav>
    <ul>
      <li id="logo">
        <a href="index.html"><img src="images/salonorchesterlogo.png" alt="Logo des Salonorchester Zürich Oberland"></a>
      </li>
      <li><a href=""><i class="far fa-calendar-alt"></i>Konzerte</a>
        <ul class="subnav">
          <li><a href="konzerte_kalender.html">Kalender</a></li>
          <li><a href="">Billette</a></li>
        </ul>
      </li>
      <li><a href=""><i class="far fa-newspaper"></i>News</a></li>
      <li><a href=""><i class="fas fa-info"></i>Über uns</a>
        <ul class="subnav">
          <li><a href="ueber_uns_orchester.html">Orchester</a></li>
          <li><a href="">Vorstand</a></li>
          <li><a href="">Dirigent</a></li>
          <li><a href="ueber_uns_kontakt.html">Kontakt</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

对于它的值(value)，我还要重新考虑您将定位设置为 absolute 然后使用 translateX 定位元素的决定，而不是仅使用一些top、left、right 和 bottom 的组合。我不知道这有什么明显的错误，但我想知道您是否可能会因为混合您的意图而得到一些意想不到的行为。