Раскрывающее меню header

Question

Всем салют, Есть такой header и под ним слайдер owl carousel

При нажатии на любой из пунктов должно срабатывать многоуровневое меню. Затемняется страница и меню появляется в виде дополнительного блока с подпунктами.

(красным выделил появляющийся блок) Пробовал реализацию через списки в списках и добавления hover, но не мог позиционировать блок при появлении. Аккордеон не позиционировался так, как нужно. Кто-то сталкивался с такой работой, можете подсказать, как реализовать такое меню? Что можно и лучше использовать?

<!-- HEADER BEGIN -->
    <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">
                <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>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
          </ul>
          
        </nav>
        

        
    </header>
    <!-- HEADER END -->

scss

.header {
font-weight: 500;
width: 100%;
min-height: 198px;
max-height: 288px;
color: white;



display: flex;
flex-direction: row;
align-items: center;
background-color: #000000;
font-size: 16px;
font-family: 'M PLUS 1p', sans-serif;


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

.menu {
    a {
        text-decoration: none;
    }
    li {
        list-style: none;
        position: relative;
    }
}

.menu__list {
    display: flex;
    >li {
        margin: 0px 10px 0px 0px;
        &:hover .sub-menu__list {
            
            display: flex;
            height: 90px;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            align-items: center;
            flex-direction: column;
        }
    }
}

.menu__link {
    color: #fff;
}

.sub-menu__list {
    display: none;
    position: absolute;
    left: 0;
    top: 15px;
    min-width: 400px;
    padding: 20px 0px 0px 0px;
    .sub-menu__list >li {
        background-color: #fff;
        margin: 142px;
    }
}

.sub-menu__link {
    
    color: #c91616;
}

}

//

Answer 1

Вроде это то что вы хотели (будет лучше, если откроете на весь экран):

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

.logo {
  background-color: red;
  width: 42px;
  height: 50px;
  margin-right: 213px;
}

.menu a {
  text-decoration: none;
}

.menu li {
  list-style: none;
  position: relative;
}

.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 {
  color: #fff;
}

.menu__link:hover + .sub-menu__list,
.sub-menu__list:hover {
  display: flex;
  background-color: red;
}

.sub-menu__list {
  display: none;
  background-color: red;
  position: absolute;
  left: 0;
  top: 16px;
  padding: 20px 0px 0px 0px;
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
}

.sub-menu__list>li {
  background-color: green;
  margin: 80px;
}

.sub-menu__link {
  color: blue;
}

<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">
          <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>
        </ul>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 2</a>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 3</a>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 4</a>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 5</a>
      </li>
    </ul>

  </nav>



</header>

БЛОГ НА HUSL

Раскрывающее меню header

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