Nesse tutorial vou demonstrar como fazer um menu horizontal dropdown com 2 níveis de sub-menus, ou seja um menu com 3 níveis, usando apenas CSS, sem Javascript, Jquery ou afins.
Lembrando que não vou estilizar muito o menu, apenas o necessário para ficar mais visível e de fácil compreendimento, essa tarefa de estilizar deixo para vocês fazerem.
Pois bem, um menu nada mais é do que uma lista que é composta pela tag <ul> que é o elemento pai, seguido de uma ou várias <li> que são os elementos filhos, sendo assim para criar um sub-menu basta colocar outra lista dentro da <li>, e para mais um nível de sub-menu basta adicionar outra lista dentro da última <li>, e assim sucessivamente.
Com a estrutura em HTML fica mais fácil o entendimento, então vamos criar primeiro a estrutura de menus em HTML, com o seguinte código...
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutoriais</a>
<ul>
<li><a href="#">MySQL</a></li>
<li>
<a href="#">Programação</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">C ++</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">Estilo</a></li>
<li>
<a href="#">Design</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Corel Draw</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Artigos</a></li>
<li><a href="#">Contato</a></li>
</ul>
Abra o seu arquivo em um navegador, e veja como ficou os menus, repare que para um sub-menu criamos outra lista dentro da li que desejamos que seja o nosso menu pai do nosso sub menu.
Próximo passo é o CSS, crie um arquivo CSS, e crie as seguintes regras...
*{
margin: 0px;
padding: 0px;
}
ul{
width: 500px; /* Tamanho da lista principal */
margin: 0 auto; /* Para centralizar na página */
list-style: none;
}
ul li{
float: left;
background-color: #FFFFFF;
position: relative; /* Necessário para o item filho se posicionar a LI que é o pai */
}
ul li a{
display: block;
padding: 10px;
border: 1px #000000 solid;
text-decoration: none;
color: #000000;
}
ul li:hover > a{ /* Quando passarmos o mouse sobre a LI colocamos estilo no A */
background-color: #0099FF;
color: #FFFFFF;
}
Seu menu ficará assim...
Mas repare que esta aparecendo os sub-menus, para esconde-los basta acrescentar essa regra...
ul li ul{
display: none;
position: absolute;
}
Agora ele deverá ficar assim...
Para mostrar o sub-menu ao passar o mouse sobre o menu pai, e ocultar o sub-menu do sub-menu, basta acrescentar essa regra...
ul li:hover ul{ /* Quando passar o mouse sobre a LI aparecerá o menu filho */
width: 110px; /* Tamanho do menu filho */
display: block;
}
ul li ul li{
width: 110px;
cursor: pointer;
}
ul li ul li:hover > a{
background-color: #0099FF;
color: #FFFFFF;
}
ul li ul li ul li{
display: none;
}
E por fim, adicionaremos essa regra para mostrar o sub-menu do sub-menu, que é o nosso terceiro nível de menus...
ul li ul li ul{
top: 0; /* Para deixar o sub-menu na mesma linha do menu pai */
}
ul li ul li:hover ul li{
display: block;
width: 130px;
left: 100%; /* Para deixar o sub-menu ao lado do menu pai */
}
Pronto! A premeira vista parece até meio complicado, mas é só uma questão de entender bem a hierarquia de qual item é o pai e o filho, depois fica bem claro o seu funcionamento, agora basta estilizar ao seu gosto.
Demonstração
Download