Как правильно сделать выпадающее меню на flexbox?

Question

Есть вот такое выпадающее меню на flexbox-ах.Но оно не работает как нужно. При наведении на пункт с выпадающими подпунктами, происходит дополнение данного flex контейнера и эти подпункты сдвигаются вниз и названия подпунктов располагаются вниз, тем самым сдвигая всё меню за пределы обозначеного контейнера. Возможно ли сделать так, чтобы подпункты сдвигались не вниз относительно родителя, а право под другие пункты? Возможно ли такое на флексбоксах? При этом нужно чтобы меню было на всю ширину контейнера. Сама разметка и css.

*{
        margin: 0;
        padding: 0;
      }

    body {
      margin: 0;
      padding: 0;
      font-family: 'Montserrat', sans-serif;
      line-height: 1.5;
    }
    .container{
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
        border: 3px solid green;
    }

      .header {
        display: flex;
        flex-wrap: wrap; 
        justify-content: space-between;
        align-items: center; 
      }
        .header .menu ul {
          display: flex;
          list-style: none;
        }
        .menu{
          width: 100%;
        }
        .header .menu ul{
          justify-content: space-between;
        }
        .header .menu ul li {
          margin: 22px 55px 22px 0px;
        }
        .header .menu ul li:last-child{
          margin-right: 0px;
        }
        .header .menu ul a {
          text-transform: lowercase;
          text-decoration: none;
          font-size: 20px;
          font-weight: 400;
          color: #4F4F4F;
        }
        /*---Выпадающее меню---*/
        .header .menu ul ul{
          display: none;
          top: 100%;
        }
        .header .menu ul li:hover > ul{
          display: inherit;
        }
        .header .menu ul ul li{
          min-width: 225px;
          float: none;
          display: list-item;
          position: relative;
        }
        /*---Hover---*/
        .header .menu ul li a:hover {
          font-weight: 700;
        }

<div class="container">  
  <div class="header">
   <div class="menu">
      <ul>
         <li><a href="#">компания</a>
            <ul>
                <li><a href="#">LoremIpsum</a></li>
                <li><a href="#">LoremIpsumLoremIpsumLoremIpsumLoremIpsum</a></li>
                <li><a href="#">LoremIpsumLoremIpsum</a></li>
            </ul>
         </li>
         <li><a href="#">личный кабинет</a></li>
         <li><a href="#">документы</a></li>
         <li><a href="#">вопросы и ответы</a></li>
         <li><a href="#">новости</a></li>
         <li><a href="#">контакты</a></li>
      </ul>
   </div>
  </div>
</div>

На скринах зелёным выделен контейнер для контента. На первом - меню до наведения, на втором -после. Видно что выпадает меню из разметки контейнера.

БЛОГ НА HUSL

Как правильно сделать выпадающее меню на flexbox?

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