打开菜单而不增加导航栏的大小

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>