1

Есть header с меню nav, при наведении на пункты выпадает блок с подпунктами, выпадает с помощью hover. введите сюда описание изображения

Нужно этот выпадающий блок растянуть на всю ширину, если ставить width 100%, то этот блок уходит за границу страницы. Только с помощью отрицательного значения left можно позиционировать, но может есть варианты реализовать это иначе? Стремлюсь к такому результату: введите сюда описание изображения

<header class="header">
        <div class="logo">
        </div>

        
        <nav class="menu">
          <ul class="menu__list">
            <li>
              <a href="" class="menu__link">Пункт 1</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 2</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 3</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 4</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 5</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
          </ul>
        </nav>  
        <!-- HAMBURGER MENU BEGIN -->
          <div class="burger-menu">
            <a href="#" class="burger-menu__button">
              <span class="burger-menu__lines"></span>
            </a>
            <nav class="burger-menu__nav"> <!--menu-->
              <ul>
                <input type="radio" name="menu" id="one" checked>
                <li>
                  <label for="one" class="title"><i class="fa fa-folder"></i>Пункт 1</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="two">
                <li>
                  <label for="two" class="title"><i class="fa fa-edit"></i>Пункт 2</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="three">
                <li>
                  <label for="three" class="title"><i class="fa fa-gavel"></i>Пункт 3</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="four">
                <li>
                  <label for="four" class="title"><i class="fa fa-gears"></i>Пункт 4</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="five">
                <li>
                  <label for="five" class="title"><i class="fa fa-gears"></i>Пункт 5</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
              </ul>
            </nav>
              
              
              <!-- <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asda</a>
              <a href="" class="burger-menu__link">a</a>
              <a href="" class="burger-menu__link">aa</a> -->
            </nav>

            <div class="burger-menu__overlay">

            </div>
          </div>
        <!-- HAMBURGER MENU END -->

      </header>

CSS CODE

.header {
    padding: 0 100px 0 100px;
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #0B0A0D;
    font-size: 16px;
    font-family: 'M PLUS 1p', sans-serif;
  }
  .list__links {
    display: flex;
    width: 362px;
    height: 159px;
    
    flex-wrap: wrap;
    flex-direction: column;
  }
  .logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
  }
  
  .menu a {
    text-decoration: none;
  }
  
  .menu li {
    list-style: none;
    position: relative;
    margin-bottom: 30px;
    margin-right: 142px;
  }
  
  .menu__list {
    display: flex;
  }
  
  .menu__list>li {
    margin: 0 5px;
  }
  
  .menu__list>li:hover {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }
  
  .menu__link {
    font-size: 1.6vw;
    color: #fff;
  }
  
  .menu__link:hover + .sub-menu__list,
  .sub-menu__list:hover {
    padding-top: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0B0A0D;
    z-index: 999;
    margin-top: 3px;
  }
  
  .sub-menu__list {
    
    height: 288px;
    display: none;
    
    position: absolute;
    left: 0;
    top: 16px;
    padding: 20px 0px 0px 0px;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
    width: calc(100vw - 550px); 
    justify-content: space-between;
  }
  

  
  .sub-menu__link {
    color: white;
    transition: .4s;
    &:hover {
        color:#75FF72;
        transition: .4s;
        ;
    }
  }


// adaptive

@media screen and (max-width: 980px) {
    .menu {
        display: none;
    }

}

2 ответа 2

1

Попробуйте так
Это изменённый в некоторых местах ваш код CSS
Обратите внимание на header и те блоки, вверху которых комментарием помечено this

 /*this*/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.header {
    padding: 0 100px 0 100px;
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    position: relative;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #0B0A0D;
    font-size: 16px;
    font-family: 'M PLUS 1p', sans-serif;
}

.list__links {
    display: flex;
    width: 362px;
    height: 159px;

    flex-wrap: wrap;
    flex-direction: column;
}

.logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
}

.menu a {
    text-decoration: none;
}

/*this*/
.menu li {
    list-style: none;
    margin-bottom: 30px;
    margin-right: 142px;
}

.menu__list {
    display: flex;
}

.menu__list>li {
    margin: 0 5px;
}

.menu__list>li:hover {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}

.menu__link {
    font-size: 1.6vw;
    color: #fff;
}

/*this*/
.menu__link:hover + .sub-menu__list,
.sub-menu__list:hover {
    padding-top: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0B0A0D;
    z-index: 999;
    position: absolute;
    top: 100%;
}

/*this*/
.sub-menu__list {
    position: absolute;
    height: 288px;
    display: none;
    left: 0;
    right: 0;
    bottom:  -100%;
    padding: 20px 0px 0px 0px;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
    justify-content: space-between;
    opacity: .5;
    background-color: red;
}



.sub-menu__link {
    color: white;
    transition: .4s;
}

.sub-menu__link:hover {
    color: #75FF72;
    transition: .4s;
}


// adaptive

@media screen and (max-width: 980px) {
    .menu {
        display: none;
    }

}
1
  • Спасибо большое! Всё получилось, немного доработал и всё встало на свои места, благодарю вас! 4 апр 2022 в 10:46
0

Вам нужно правильно спозиционировать подменю

Посмотрите это решение
Обратите внимание на каких блоках висит position: absolut и position:relative

А так же left и right и top свойства

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    background: gray;
    font-size: 22px;
    position: relative;
}

.sub-menu {
      position: absolute;
    left: 0;
    right: 0;
    min-height: 300px;
    display: none;
    opacity: 0;
    pointer-events: none;
    background: gold;
}

.sub-item {
    width: 75px;
    height: 35px;
    background: red;
    margin: 10px;
}

.menu-item {
    margin: 10px;
}

.menu-item span {
    display: block;
    padding: 10px 25px;
    background: white;
    cursor: pointer;
}

.menu-item:hover .sub-menu {
    display: flex;
    pointer-events: auto;
    opacity: 1;
    top: 100%;
}

.sub-menu--2 {
    background: limegreen;
}

.sub-menu--3 {
    background: aquamarine;
}
<header>
    <nav class="navigation">
            <div class="menu-item">
                <span>Меню 1</span>
                <div class="sub-menu sub-menu--1">
                    <div class="sub-item">1</div>
                    <div class="sub-item">2</div>
                    <div class="sub-item">3</div>
                </div>
            </div>
            <div class="menu-item">
                <span>Меню 2</span>
                <div class="sub-menu sub-menu--2">
                    <div class="sub-item">4</div>
                    <div class="sub-item">5</div>
                    <div class="sub-item">6</div>
                </div>
            </div>
            <div class="menu-item">
                <span>Меню 3</span>
                <div class="sub-menu sub-menu--3">
                    <div class="sub-item">7</div>
                    <div class="sub-item">8</div>
                    <div class="sub-item">9</div>
                </div>
            </div>
    </nav>
</header>

1
  • Спасибо за ответ, но всё равно не удаётся спозиционировать так, как у вас( абсолюты расставлял и left top right , блок просто стоит на месте без изменений( 4 апр 2022 в 0:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.