Tribo do C.I.

Só mais um blog de informática (só que não)

Criando um Menu Dropdown com CSS

janeiro 10th, 2013

Se quiser ler esse post em inglês, acesse: http://codepen.io/sheldonled/blog/menu-dropdown-css-3levels

É muito comum ver sites utilizando menu dropdown, mesmo que este tipo de menu seja um pouco difícil de lidar quando vamos pro mundo mobile. Se você quer um menu desses no seu site, siga os passos abaixo e crie seu próprio menu dropdown, utilizando apenas CSS.

Primeiro, defina seus links no HTML, para nosso exemplo, usaremos a tag nav do HTML5

<nav>
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Tutoriais</a>
			<ul>
				<li><a href="#">Php</a></li>
				<li><a href="#">Java</a></li>
				<li><a href="#">SQL</a>
                                     <ul>
                                          <li><a href="#">PostgreSQL</a></li>
                                          <li><a href="#">MySql</a></li>
                                     </ul>
                                </li>
			</ul>
		</li>
		<li><a href="#">Redes Sociais</a>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
			</ul>
		</li>
		<li><a href="#">Sobre</a></li>
	</ul>
</nav>

Então veja que o mapa do menu ficou da seguinte maneira:

  • Inicio
  • Tutoriais
    • Php
    • Java
    • SQL
      • PostgreSQL
      • MySql
  • Redes Sociais
    • Facebook
    • Twitter
  • Sobre

Agora, visualizando como ficou a hierarquia de links, passamos para o CSS (Lembrando que tudo pode ser recustomizável para adequar ao seu layout):

ul {
    position: absolute;
    margin: 0;
    list-style:none;
}

li {
    display: inline-block;
    padding: 5px 10px;
    position: relative;
}

Setamos a configuração inicial para todas as listas (ul) e seus elementos (li). O position absolute dá uma independência às listas e sublistas. Agora vamos ao estilo-chave do menu

li:hover > ul {
    display: block;
}

Estamos falando para o navegador que, ao passar o mouse sobre um item da lista (li), sua sublista ( >ul) será mostrada (display block). Mas para isso acontecer, precisamos deixa-las invisíveis (display none).

ul ul {
    position: absolute;
    display: none;
    margin: 0;
    padding: 5px 10px;
}
ul ul li {
    display: block;
}

Agora sim, nosso menu já estará funcionando, porém se quiser fazer o terceiro nível funcionar corretamente, é melhor adicionar o estilo abaixo:

ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

O código acima faz o 3º nível do submenu aparecer ao lado do item pai dele. Veja o resultado abaixo.

See the Pen Cfqmb by Sheldon Led (@sheldonled) on CodePen.

Sobre Sheldon Led:
Desenvolvedor e palestrante desde 2009. Já trabalhou com sistemas legados e software de gestão, mas hoje atua somente com web. Já participou do desenvolvimento de alguns portais governamentais e sites utilizando a plataforma Joomla e WordPress. Apesar de ser um desenvolvedor full-stack, tem focado seus estudos em tecnologias front-end e busca apoiar e colaborar em projetos envolvendo Software Livre, seja em eventos, material para estudo ou contribuição de código.
  • http://www.rickytornelle.com Henrique Tornelle

    Sheldon , obrigado pela informação…
    Meu site está ai…. gostária de pedir uma avaliação sua sobre o mesmo,
    onde eu o melhoro? ( com excessão do conteudo é claro )

    Digo em performance no visual..

    Uso a plataforma do blogger ja que nao tenho nem o minimo de conhecimento de edição PHP HTML CSS enfim.. só fuxico mesmo…

    O que melhoraria meu blog o aproximando ainda mais da perfeição?

  • Rodrigo Sieja Bertin

    Fiz um código usando a estrutura postada para exibir uma imagem em baixo do link. Se não fizer alguma modificação ela não fica centralizada com o mesmo, mas sempre encostada na margem esquerda do link.

    O que fiz para corrigir?

    Na regra para nav ul li:hover > ul, adicionei a propriedade text-align com parâmetro center:

    nav ul li:hover > ul {
    /* … aparecer as sublistas */
    display: block;
    cursor: pointer;
    text-align: center;
    }

    E um cursor: pointer também para ficar mais bonito. :p

  • http://sistemasparainter.net Thais

    Muito bom o artigo! Parabens! 😉

  • Assane

    Ajudou! Mas não consigo colocar o fundo no menu!

  • http://josielmoura.com.br Josiel

    Olá Assane,
    basta colocar o background na tag ul

    ul {
    position: absolute;
    margin: 0;
    list-style:none;
    background:gray;
    }

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)