Como Criar um Menu Horizontal com Sub Menu Utilizando CSS3

Clique aqui e veja aqui o código em funcionamento.

Como Criar um Menu com Sub-menu?

No princípio das minhas peripécias com front-end, eu tive bastante dificuldade para criar até mesmo um simples menu horizontal com CSS seguindo nossos amados tutoriais nas "interwebs" da vida. Criar um menu com Drop-down então, com o que eu sabia, era impensável! Antes de estudar bem o CSS, eu nem imaginava a capacidade que ele tinha. Se você não sabe o que é drop-down:

Drop-down em tradução livre e literal significa suspenso. Mas no caso de um menu com função drop-down, é um menu com um sub-menu acoplado para determinados items, que se revela ao passar o mouse ou clicar nesses mesmo itens.

Quebrei muito a cabeça com tutoriais e códigos prontos e não conseguia entender a lógica do sistema e sem entender essa lógica não era possível adaptá-lo para meus fins e acabava por utilizar outras saídas que até resolviam o problema, porém davam muito trabalho para pouco resultado.

Utilizando Javascript

A solução que acabei encontrando foi utilizar o JavaScript , e como também sabia muito pouco a respeito também resolvi complementar a solução utilizando uma biblioteca que hoje conhecemos como frameworks, no meu caso escolhi o jQuery (que até hoje é meu preferido), pra resolver esse meu problema.

Eis minha antiga estrutura para o menu, uma lista não ordenada com um item com a classe menu e uma sub-lista com a classe sub-menu:

<ul class="menu">
 <li><a href="#">Home</a></li>
 <li class="menu"><a href="#">Assuntos</a>
  <ul class="sub-menu">
   <li><a href="#">Livros</a></li>
   <li><a href="#">Filmes</a></li>
  </ul>
 </li>
 <li><a href="#">Sobre</a></li>
</ul>

Abaixo uma formatação básica para dispor os elementos do menu na horizontal e retirar o estilo de lista (aqueles pontos antes de cada item).

li{
 list-style:none;
 float:left;
}
.sub-menu{
 position:absolute;
 display:block;
 float:none;
}

Por fim ainda faltava o JavaScript para realizar os efeitos.

$(".sub-menu").hide();  //Esconde o submenu
// Função (.hover) que permite fazer algo ao passar o mouse sobre a classe .menu
$(".menu").hover(function(){
  $(".sub-menu").show();  // Revela o submenu
,function(){  // Ao tirar o mouse do elemento
  $(".sub-menu").hide()  // Esconde novamente o menu
})

Utilizando Puro CSS

Mais tarde encontrei a solução no blog do já famoso na internet maujor.com com as chamadas Pseudo Classes CSS que são usadas para interpretar certas condições. Assim podemos adicionar efeitos desencadeados por essas condições. Para nossos fins, temos a Pseudo Classe :hover que serve justamente para aplicar propriedades CSS a um elemento que tenha o mouse passado sobre ele!

Deixando assim completamente desnecessário o código JavaScript citado acima, já que ele o próprio CSS dá conta sozinho de revelar o menu ao passar o mouse. Com a chegada do CSS3 a utilização do JavaScript tem caído ainda mais em desuso para esses determinados fins, já que a linguagem ganha INFINITAS POSSIBILIDADES com as várias novas regras. Em breve vou escrever um artigo mais detalhado sobre o assunto.

Sendo bem claro, no nosso caso vamos resolver o problema aplicando uma regra para esconder o Sub-menu e para fazê-lo aparecer novamente, usamo a já citada Pseudo Classe :hover, segue abaixo o novo código:

/* Novo HTML mais limpo */
<ul class="menu">
 <li><a href="#">Home</a></li>
 <li class="has-submenu"><a href="#">Assuntos</a>
  <ul>
   <li><a href="#">Livros</a></li>
   <li><a href="#">Filmes</a></li>
  </ul>
 </li>
 <li><a href="#">Sobre</a></li>
</ul>

*{margin:0;padding:0;} /* Tiny Reset */
ul.menu li{
 display:inline-block;
}
li.has-submenu ul{
 display:none;
 position:absolute;
}
li.has-submenu ul li{
 display:flex;
}
li.has-submenu:hover ul{
 display:block;
}

/* Visual */
ul.menu{
 margin:2rem;
 display:flex;
}
ul.menu li a{
 text-decoration:none;
 background: #fff;
 border:1px solid #ddd;
 padding:1rem 2rem;
 margin-right:-1px;
 color:#333;
}
li.has-submenu ul{
 margin-top:.95rem;
}
ul.menu li a:hover{
 background:#eee;
}
li.has-submenu ul li a{
 min-width:100px;
}
li.has-submenu ul li{
 margin-bottom:-1px;
}
ul.menu li.has-menu{
 top:0;
}

Explicando o código

A primeira regra seleciona todos os elementos ( * ) e retira todos os espaçamentos e margens ( margin:0; padding:0; ), para podermos configurá-los manualmente.

A segunda regra seleciona todos os itens da lista com a classe menu ( ul.menu li ) e manda o interpretador exibí-los em linha de blocos.

A terceira regra seleciona qualquer lista que estiver dentro de um item com a classe has-submenu ( li.has-submenu ul ) e manda o interpretador não mostra-lás, define sua posição como absoluta pra não empurrar outros elementos.

A útima regra é quem faz a mágica de mostrar o sub-menu ao massar o mouse sobre o item da classe menu a qual ele pertence ( li.has-submenu:hover ul ).

O restante do código apenas altera a aparência do menu.

Qualquer dúvida, crítica ou sugestão deixe um comentário.