Откройте меню без увеличения размера панели навигации

Question

У меня есть панель навигации с элементами и меню, выполненная с помощью flexbox, проблема в том, что при открытии меню расширяется панель навигации, можно ли ее избежать? Я пробовал другие пути, используя абсолютную позицию по отношению к навигационной панели, но проблема в том, что при уменьшении размера экрана положение неопределенно. Можно ли расширить меню, не увеличивая размер навигационной панели?

.menu {
  font-family: sans-serif;
  width: 100%;
  margin: auto;
  border: 1px solid black;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.menu ul li {
  width: 20%;
}
.menu ul li > ul {
  display: flex;
  visibility: hidden;
  position: absolute;
  left: -99999;
  flex-direction: column;
  border-radius: 21px;
  background: blue;
}
.menu ul li > ul li {
  width: 100%;
  position: relative;
}
.menu ul li > ul li a:hover {
  color: red;
}
.menu ul li:hover > ul {
  visibility: visible;
  position: relative;
  left: 0;
}
.menu a {
  text-transform: uppercase;
  font-size: 15px;
  display: block;
  padding: 15px;
  color: black;
  text-decoration: none;
  text-align: center;
}
.menu .sub-menu li > a {
  color: black;
}
.menu .sub-menu > a:after {
  padding-left: 5px;
}

    <nav class="menu">
      <ul>
        <li class="sub-menu"><a href="/games">Games</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">manga/hq</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">action figure</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">raridades</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">Filmes</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>
      </ul>
    </nav>

Answer 1

Проблема position: relative на .menu ul li:hover > ul - ее устранение почти решает проблему.Теперь добавьте position: relative к menu ul li и right: 0 к .menu ul li:hover > ul.Смотри демо ниже:

.menu {
  font-family: sans-serif;
  width: 100%;
  margin: auto;
  border: 1px solid black;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.menu ul li {
  width: 20%;
  position: relative; /* added */
}
.menu ul li > ul {
  display: flex;
  visibility: hidden;
  position: absolute;
  left: -99999px;
  flex-direction: column;
  border-radius: 21px;
  background: blue;
}
.menu ul li > ul li {
  width: 100%;
  position: relative;
}
.menu ul li > ul li a:hover {
  color: red;
}
.menu ul li:hover > ul {
  visibility: visible;
  /*position: relative;*/
  left: 0;
  right: 0; /* added */
}
.menu a {
  text-transform: uppercase;
  font-size: 15px;
  display: block;
  padding: 15px;
  color: black;
  text-decoration: none;
  text-align: center;
}
.menu .sub-menu li > a {
  color: black;
}
.menu .sub-menu > a:after {
  padding-left: 5px;
}

<nav class="menu">
      <ul>
        <li class="sub-menu"><a href="/games">Games</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">manga/hq</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">action figure</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">raridades</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>

        <li class="sub-menu"><a href="/games">Filmes</a>                    
          <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Usados</a></li>                          
                <li><a href="#">Raros</a></li>  
                <li><a href="#">Secção Nostalgia</a></li>   
          </ul>                  
        </li>
      </ul>
    </nav>