Как сделать выпадающее меню элемента ul li на всю ширину экрана

Рейтинг: 0Ответов: 1Опубликовано: 16.02.2023

(Я еще новичок в web разработке)

Я сделал навигационную панель, но блок выпадающего меню (Header__Dropdown-content (см. ниже)) прикреплен к левому краю своего li.

Вот код:

/* Отображение содержимого выпадающего списка (по умолчанию none) */

.Header__Dropdown-content {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 0;
  background: black;
  height: 60vh;
  width: 100%;
  transition: visibility 0s, opacity 0.5s;
  opacity: 0;
}


/* Появление содержимого меню */

.Header__Dropdown ul li:hover .Header__Dropdown-content {
  visibility: visible;
  opacity: 1;
}
<nav class="Header__Dropdown">
  <ul>
    <li>
      <a class="Header__Droplink" href="#">Value0</a>
      <div class="Header__Dropdown-content">
        <ul>
          <li><a href="#">Link0</a></li>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a class="Header__Droplink" href="#">value1</a>
      <div class="Header__Dropdown-content">
        <ul>
          <li><a href="#">Link0</a></li>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

И без JS пожалуйста, я не знаю его.

css html5
Источник: Stack Overflow на русском

Ответы

▲ 0

Во-первых, hover срабатывает только над потомком...

.parent,
.child {
  width: 100px;
  height: 100px;
  background: red;
}

.child {
  opacity: 0;
  background: green;
}

.parent:hover .child {
  opacity: 1;
}
<div class="parent">
  <div class="child">
  </div>
</div>

<div class="child">
</div>

Чтобы HOVER сработал над другим элементом, элемент должен быть иерархии ниже , и что еще важно у этих элементов должен быть один родитель

.child_1,
.child_2 {
  width: 100px;
  height: 100px;
  background: red;
}

.child_2 {
  opacity: 0;
  background: green;
}

.child_1:hover~.child_2 {
  opacity: 1;
}
<div class="parent">
  <div class="child_1">
  </div>
  <div class="child_2">
  </div>
</div>

/* Отображение содержимого выпадающего списка (по умолчанию none) */

.Header__Dropdown-content {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  top: 100px;
  /*Изменил*/
  left: 0;
  right: 0;
  background: black;
  height: 60vh;
  width: 100%;
  transition: visibility 0s, opacity 0.5s;
  opacity: 0;
}

.Header__Droplink:hover~.Header__Dropdown-content {
  /*Изменил*/
  visibility: visible;
  opacity: 1;
}
<nav class="Header__Dropdown">
  <ul>
    <li>
      <a class="Header__Droplink" href="#">Value0</a>
      <div class="Header__Dropdown-content">
        <ul>
          <li><a href="#">Link0</a></li>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a class="Header__Droplink" href="#">value1</a>
      <div class="Header__Dropdown-content">
        <ul>
          <li><a href="#">Link0</a></li>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>