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

Question

Всем привет! Подскажите пожалуйста как растянуть выпадающие меню на всю ширину экрана?(чтобы была заполнена область указаная стрелкой)

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover, .dropdown:hover .dropbtn {
  background-color: #4CAF50;
}

nav li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  background-color: #f9f9f9;
}

.dropdown-content a {
  display: block;
  text-align: left;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Пункт 3</a>
      <div class="dropdown-content">
        <a href="#"><img src="img1.jpg"> Пункт 1</a>
        <a href="#"><img src="img2.jpg"> Пункт 2</a>
        <a href="#"><img src="img3.jpg"> Пункт 3</a>
        <a href="#"><img src="img4.jpg"> Пункт 4</a>
        <a href="#"><img src="img5.jpg"> Пункт 5</a>
        <a href="#"><img src="img6.jpg"> Пункт 6</a>
      </div>
    </li>
  </ul>
</nav>

Answer 1

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template: auto 0 / repeat(100, min-content) 1fr;
  background: silver;
}

li {
  display: contents;
}

a {
  display: block;
  padding: .5em 1em;
  grid-row: 1;
}

li > a {
  white-space: nowrap;
}

li > a:only-child {
  grid-row: 1 / -1;
}

li:hover > a {
  background: #DDD;
}

li a:hover {
  background: antiquewhite;
}

.dropdown-content {
  grid-row: 2;
  grid-column: span 1000;
  display: none;
  height: fit-content;
  background: linear-gradient(to right, red, blue);
}

li:hover .dropdown-content {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Пункт 3</a>
      <div class="dropdown-content">
        <a href="#"><img src="img1.jpg"> Пункт 1</a>
        <a href="#"><img src="img2.jpg"> Пункт 2</a>
        <a href="#"><img src="img3.jpg"> Пункт 3</a>
        <a href="#"><img src="img4.jpg"> Пункт 4</a>
        <a href="#"><img src="img5.jpg"> Пункт 5</a>
        <a href="#"><img src="img6.jpg"> Пункт 6</a>
      </div>
    </li>
  </ul>
</nav>

Lorem ipsum...

Answer 2

Position не хватало

ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template: auto 0 / repeat(100, min-content) 1fr;
  background: silver;
}

li {
  display: contents;
}

a {
  display: block;
  padding: .5em 1em;
  grid-row: 1;
}

li > a {
  white-space: nowrap;
}

li > a:only-child {
  grid-row: 1 / -1;
}

li:hover > a {
  background: #DDD;
}

li a:hover {
  background: antiquewhite;
}

.dropdown-content {
  position: absolute;
  left: 0;
  top: 35px;
  width: 100%;
  grid-row: 2;
  grid-column: span 1000;
  display: none;
  height: fit-content;
  background: linear-gradient(to right, red, blue);
}

li:hover .dropdown-content {
  display: block;
}

<nav>
   <ul>
     <li><a href="#">Пункт 1</a></li>
     <li><a href="#">Пункт 2</a></li>
     <li class="dropdown">
       <a href="#" class="dropbtn">Пункт 3</a>
       <div class="dropdown-content">
         <a href="#"><img src="img1.jpg"> Пункт 1</a>
         <a href="#"><img src="img2.jpg"> Пункт 2</a>
         <a href="#"><img src="img3.jpg"> Пункт 3</a>
         <a href="#"><img src="img4.jpg"> Пункт 4</a>
         <a href="#"><img src="img5.jpg"> Пункт 5</a>
         <a href="#"><img src="img6.jpg"> Пункт 6</a>
       </div>
     </li>
  </ul>
</nav>

Answer 3

Вот так это делается, тут главное правильно позиционировать элементы, раз уж взялись использовать position)).
"ul" убрал "overflow: hidden;", так как он не нужен. Сделал "li" "position: static" на всякий случай, чтобы "dropdown-content" не позиционировался от "li", а от "ul" - для этого дал ему "position: relative"

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  background-color: #333;
}

nav li {
  float: left;
  position: static;
}

nav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover, .dropdown:hover .dropbtn {
  background-color: #4CAF50;
}

nav li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  background-color: #f9f9f9;
}

.dropdown-content a {
  display: block;
  text-align: left;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Пункт 3</a>
      <div class="dropdown-content">
        <a href="#"><img src="img1.jpg"> Пункт 1</a>
        <a href="#"><img src="img2.jpg"> Пункт 2</a>
        <a href="#"><img src="img3.jpg"> Пункт 3</a>
        <a href="#"><img src="img4.jpg"> Пункт 4</a>
        <a href="#"><img src="img5.jpg"> Пункт 5</a>
        <a href="#"><img src="img6.jpg"> Пункт 6</a>
      </div>
    </li>
  </ul>
</nav>

БЛОГ НА HUSL

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

Ответы (3 шт):