Menu simples com CSS

Neste tutorial, vou explicar como criar um menu simples com submenu utilizando apenas CSS. Não vamos utilizar nenhuma linha de código em JavaScript, apenas CSS e HTML. Para o evento hover que irá mostrar o submenu, também iremos utilizar apenas CSS, tanto para ocultar, quando para mostrar seu conteúdo.

Veja um exemplo do menu que vamos criar no link abaixo:

Então vamos lá.

Menu simples com submenu em CSS

Vamos começar criando nosso HTML.

HTML sem submenus

Normalmente, quando vamos criar qualquer tipo de menu, utilizamos uma lista não ordenada (<ul>, <li>, e <a>). Então nosso HTML do menu principal (sem os submenus), ficou assim:

<div class="menu">
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Suporte</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</div>

Se você quiser que isso se transforme em um menu horizontal, terá que alterar várias propriedades no CSS, veja abaixo.

CSS do menu principal

Para começar, vamos definir um padrão para nosso CSS. Isso será uma espécie de reset de CSS, portanto, se você já tiver algum reset, poderá pular essa parte.

*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

Perceba que estamos removendo a margem e o padding de todos os elementos do nosso HTML. Além disso, estamos utilizando border-box para que tudo fique no tamanho correto, e configurando o estilo da fonte.

Agora vamos configurar o menu e a lista não ordenada do mesmo.

.menu{
  background: #000;
}
.menu .menu-list{
  list-style: none;
}
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing:0.2em;
}
.menu > .menu-list > li{
  float: left;
  position: relative;
}
.menu > .menu-list > li > a {
  padding: 20px;
  margin: 0 5px;
  background: #000;
}
.menu > .menu-list > li:hover a {
  background: #444;
}

Perceba acima, que em várias partes dos nossos seletores, estamos utilizando o seletor de filhos (Child) >. Este seletor garante que apenas os filhos diretos dos elementos que estamos selecionando sejam afetados, assim, não teremos que desfazer configurações quando formos configurar nosso submenu.

Até agora nosso menu ficou assim:

Menu simples em CSS

Se você não precisa de um submenu, pode parar por aqui.

HTML com submenu

Para o nosso submenu, vamos adicionar uma nova <ul> dentro do <li> do menu principal, veja como fica:

<div class="menu">
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Serviços</a>
       <ul class="sub-menu">
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
      </ul>
    </li>
    <li><a href="#">Suporte</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</div>

Agora vamos configurar o menu e o submenu com CSS.

CSS com submenu

/* Reset CSS */
*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
/* Fundo do menu */
.menu{
  background: #000;
}
/* Remove as bolinhas do lado das listas */
.menu .menu-list, .menu .sub-menu{
  list-style: none;
}
/* Configura todos os links do nosso menu */
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing:0.2em;
}
/* Faz os <li>s ficarem na horizontal */
.menu > .menu-list > li{
  float: left;
  position: relative;
}
/* Configura os links do menu principal */
.menu > .menu-list > li > a {
  padding: 20px;
  margin: 0 5px;
  background: #000;
}
/* Configura o fundo do menu principal quando com mouse hover */
.menu > .menu-list > li:hover a {
  background: #444;
}
/* Mostra o submenu no evento de mouse hover */
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
}
/* Configura o estilo do submenu */
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 50px;
  left: 5px;
  background: blue;
  min-width: 200px;
  z-index: 1000;
  display: none;
}
/* Configura os links do submenu */
.menu > .menu-list > li > .sub-menu > li > a {
	padding: 10px 20px;
}
/* Clearfix para o menu */
.menu:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

O CSS acima esconde o submenu e mostra assim que você passar o mouse sobre o item que o tem. Veja nos comentários acima para entender melhor.

O nosso exemplo acima ficou assim:

See the Pen Simple menu with submenu – CSS Only by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.

Apesar de bem simples, muitos sites utilizam seus menus no estilo acima.

Concluindo

O menu detalhado neste tutorial funciona perfeitamente em quase todos os navegadores (com algumas correções, deve funcionar até no IE6), então, pode utilizar sem medo.

Em caso de dúvidas, basta comentar aí abaixo.