Почему ul с классом "subnav" не больше?

ProgramBox

Почему ul с классом «subnav» не больше?

Post author:admin
Запись опубликована:26 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Ul с классом «subnav» должен быть больше. Я заметил это, потому что цвет фона отображается только в небольшой области. Если я наведу указатель мыши на nav ul li, ul «subnav» не выйдет из nav. Как ни странно, ссылки внутри «subnav» отображаются правильно и отлично выходят за пределы навигации. Только когда я присвою «subnav» определенную высоту, он выйдет за пределы навигации.

 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>

1. Что именно вы имеете в виду, говоря «Он должен быть больше».

2. Фон покрывает только верхнюю часть моих ссылок внутри «subnav». Хотя ссылки отображаются в виде столбца. Когда я проверяю «subnav», он очень маленький, и ссылки переполняют его.

Ответ №1:

height: 100% Свойство, которое вы устанавливаете в nav ul селекторе, нацелено на ul внутренний nav интерфейс верхнего уровня, а также на ваш ul.subnav . Вы могли бы либо изменить значение nav ul на nav > ul , если вы хотите, чтобы оно было специфичным только для верхнего уровня ul , либо вы могли бы переопределить эту высоту в вашем .subnav блоке:

 .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 для позиционирования элемента, в отличие от простого использования некоторой комбинации top , left , right и bottom . Я не знаю, есть ли в этом что-то явно неправильное, но мне интересно, можете ли вы получить какое-то неожиданное поведение, смешав свои намерения там.

1. Хорошо, я удалил absolute . Теперь «subnav» отображается правильно, но смещается вверх nav ul li

2. Приятно! Теперь я также понимаю, почему это произошло. В будущем я постараюсь быть более конкретным в своих селекторах 🙂

3. @Defgun — рад, что это помогло — что касается absolute / translateX , я на самом деле пытался донести, что вам следует удалить translateX , а вместо этого добавить top: <some value in px or % и left: 10% к блоку, чтобы расположить его соответствующим образом. Извините, если я был неясен.

Ответ №2:

Вот попробуйте это. Я присвоил вашему классу .subnav стиль height: auto; . Также я удалил ваши стили заполнения и ширины.

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

Ответ №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
}