Como criar: Subnavegação

Aprenda como usar CSS para criar menus de subnavegação.

Criar subnavegação

Primeiro passo - Adicionar HTML:

<!-- Carregando ícones do Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Menu de navegação -->
<div class="navbar">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">Sobre <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">Empresa</a>
      <a href="#team">Equipe</a>
      <a href="#careers">Carreiras</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Serviços <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#bring">Trazer</a>
      <a href="#deliver">Entregar</a>
      <a href="#package">Pacote</a>
      <a href="#express">Express</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Parceiros <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
      <a href="#link4">Link 4</a>
    </div>
  </div>
  <a href="#contact">Contacto</a>
</div>

Exemplo de explicação:

Você pode usar qualquer elemento para abrir o menu de navegação secundária/derrubável, por exemplo, elementos <button>, <a> ou <p>.

Use elementos de contêiner (como <div>) para criar o menu de navegação secundária e adicione links de navegação secundária nele.

Use elementos <div> para envolver o botão e <div> para posicionar corretamente o menu de navegação secundária usando CSS.

Segunda etapa - Adicionar CSS:

/* Menu de navegação */
.navbar {
  desbordamento: escondido;
  cor-fundo: #333;
{}
/* Link de navegação */
.navbar a {
  flutuante: esquerda;
  tamanho-fonte: 16px;
  cor: branco;
  alinhamento-texto: centro;
  preenchimento: 14px 16px;
  decora-texto: none;
{}
/* Menu de navegação secundária */
.subnav {
  flutuante: esquerda;
  desbordamento: escondido;
{}
/* Botão de navegação secundária */
.subnav .subnavbtn {
  tamanho-fonte: 16px;
  borda: none;
  contorno: none;
  cor: branco;
  preenchimento: 14px 16px;
  cor-fundo: herdar;
  família-fonte: herdar;
  margem: 0;
{}
/* Adicionar cor de fundo vermelha ao passar o mouse sobre o link de navegação */
.navbar a:hover, .subnav:hover .subnavbtn {
  cor-fundo: vermelho;
{}
/* Definir estilo de conteúdo da navegação secundária - usar posicionamento absoluto */
.subnav-content {
  exibir: none;
  posição: absoluta;
  esquerda: 0;
  cor-fundo: vermelho;
  largura: 100%;
  z-index: 1;
{}
/* Definir estilo de link de navegação secundária */
.subnav-content a {
  flutuante: esquerda;
  cor: branco;
  decora-texto: none;
{}
/* Adicionar cor de fundo cinza ao passar o mouse */
.subnav-content a:hover {
  cor-fundo: #eee;
  cor: black;
{}
/* Quando o mouse estiver sobre o contêiner de navegação secundária, abrir o conteúdo da navegação secundária */
.subnav:hover .subnav-content {
  display: block;
{}

Experimente você mesmo