Блог

Главная - Вопросы по программированию - Открыть меню без увеличения размера навигационной панели

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

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня есть панель навигации с элементами и меню, выполненная с помощью 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>

Комментарии:

1. Ваш вопрос совершенно неясен, пожалуйста, перепроверьте свой вопрос, исправьте орфографические ошибки и сформулируйте его так, чтобы он был более понятным! 🙁

Ответ №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>