Como criar: Barra de navegação dividida

Aprenda a usar CSS para criar uma barra de navegação dividida.

Crie uma barra de navegação dividida

Primeiro passo - Adicione HTML：

<div class="topnav">
  <a href="#home">Início</a>
  <a href="#news">Notícias</a>
  <a href="#contact">Contato</a>
  <a href="#about" class="split">Ajuda</a>
</div>

Segundo passo - Adicione CSS：

/* Crie uma barra de navegação superior com fundo preto */
.topnav {
  cor-fundo: #333;
  excedente: escondido;
}
/* Defina o estilo dos links na barra de navegação */
.topnav a {
  flutuante: esquerda;
  cor: #f2f2f2;
  alinhamento-texto: centro;
  preenchimento: 14px 16px;
  text-decoration: none;
  tamanho-fonte: 17px;
}
/* Altere a cor do link ao passar o mouse sobre ele */
.topnav a:hover {
  cor-fundo: #ddd;
  cor: preto;
}
/* Crie um link (divisão) alinhado à direita dentro da barra de navegação */
.topnav a.split {
  flutuante: direita;
  cor-fundo: #04AA6D;
  cor: branco;
}

Experimente pessoalmente

Página relevante

Tutorial:Como criar uma barra de navegação superior responsiva

Tutorial:Barra de navegação CSS