Question

“ subnav”类的ul应该更大。我注意到了，因为背景色仅显示在很小的区域中。如果我将鼠标悬停在导航栏上，则“导航栏”不会退出导航栏。奇怪的是，“ subnav”内部的li表示正确，并且正好位于导航之外。只有当我给“导航栏”指定特定高度时，它才会超出导航栏。

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

您在height: 100%选择器中设置的nav ul属性的目标是ul内部的顶级nav以及您的ul.subnav。如果您打算将nav ul更改为nav > ul仅针对顶级ul，或者可以在.subnav块中覆盖该高度，请执行以下操作：< / p>

.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>

关于它的价值，我还将再次考虑您将位置设置为absolute，然后使用translateX来定位元素的决定，而不是仅仅使用{{1}的某种组合}，top，left和right。我不知道这有什么明显错误，但是我想知道您是否可能通过混合意图而得到一些意想不到的行为。

Answer 2

在这里尝试一下。我给您的.subnav类提供了样式height: auto;。我也删除了您的填充和宽度样式。

.subnav {
    height: auto;
    display: none;
    position: absolute;
    background-color: #b18e4a;
    /*transform: translateX(10%);*/
    z-index: 1;
}

Answer 3

将高度添加到nav ul li：hover .subnav

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

为什么带有“ subnav”类的ul不更大？

3 个答案: