Fazer um menu dropdown com CSS puro

2a atrás

Nesse tutorial você aprenderá a fazer um menu dropdown, apenas com #CSS, o resultado será o seguinte:

No HTML, adicione o seguinte código, que representa o botão que acionará o menu e o menu dropdown:

<div class="dropdown">
  <button>DROPDOWN MENU</button>
    
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
  </ul>
</div>

No CSS, adicione as regras a seguir:

.dropdown {
  position: relative;
}

.dropdown ul {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: none;
  list-style: none;
  padding: 1em;
  position: absolute;			
}
    
.dropdown:focus-within ul {
  display: block;
}

O grande segredo está na utilização da pseudo-classe :focus-within, ela é ativada toda vez que o elemento em questão ou seus filhos estão com focus. Dessa forma, o menu dropdown aparece toda vez que o botão ou os itens do menu estão focados.

Comentários (0)