Sub-Menu com 3 níveis com CSS

Nesse tutorial, vou ensinar com criar um menu drop down ou submenu como 3 níveis (podendo aumentar para mais níveis). Então vamos lá.

Primeira coisa é criar o html, e com isso iremos utilizar uma lista não ordenada, porque o menu nada mais é do que uma lista de links. Mas nesse caso, quando quero informar que queremos um nível depois, temos que colocar outra lista dentro no elemento, e assim sucessivamente. Parece complicado não? Mas não é tanto assim, vocês irão ver:

<ul id="menu">
 
	<li><a href="#">Home</a></li> 
	<li><a href="#">Serviços</a>
 		<ul>
		 
			<li><a href="#">Web</a></li> 
			<li><a href="#">SEO</a></li> 
			<li><a href="#">Gráfico</a>
		 		<ul>
					<li><a href="#">Cartão</a></li>
					<li><a href="#">Panfleto</a></li>
					<li><a href="#">Banner</a></li>
				</ul>
 
			</li>
 
		</ul>
 
	</li> 
	<li><a href="#">Produtos</a></li>
 	<li><a href="#">Contato</a></li>
</ul>

Repare que depois de fechar o link, incluo mais uma lista, e se quero fazer mais um nível nesse sub-menu, farei a mesma coisa, vou depois de fechar um link(< / a >), e antes de fechar a o item da lista (< / li >), e incluirei mais uma lista, e assim sucessivamente.

Depois de criar a nossa lista, vamos começar a brincadeira, que a sua estilização, criar um novo arquivo, e dê o nome de estilo.css, e link para sua página. Aconselho a criar uma pasta para colocar o arquivo css, dê o nome de css:

<link href="css/estilo.css" rel="stylesheet" type="text/css" />

No css, é sempre interessante seguirmos uma certa ordem, em que comece com as declarações genéricas, e depois indo para as mais especificas. Comentar onde começa as seções também é uma boa prática. Então vamos começar com as configurações genéricas.

/*******************************

*CONFIGURAÇÕES GENÉRICAS

********************************/

*{margin:0; padding:0; }

ul{list-style-type:none}

a{text-decoration:none}

a:hover{text-decoration:underline}

Agora vamos fazer umas configurações mais precisas, no caso definir largura, cor, bordar, e efeito :hover no link.

/*******************************

*CONFIGURAÇÕES MENU - Estilização

********************************/

#menu{

width:150px;/*define uma largura*/

}

#menu li{

position:relative;/*define a posição relativa,importante para limitar, porque usaremoso absolute*/

}

#menu li a{

display:block; /*define o elemento em bloco para ocupar 100% de largura do elemento pai*/
height:25px; /*Define uma altura*/
line-height:25px;/*Cenraliza na vertical */
color:#777; /*define a cor da fonte*/
border-bottom:1px solid #ccc; /*define uma bordar no bottom*/
background:#f5f5f5;/*define a cor do fundo*/

#menu li a:hover{

background:#e5e5e5;/*define a cor do fundo*/
color:#333;/*define a cor da fonte*/

}

Uma ressalva importante, no #menu li, repare que coloquei um position:relative, isso porque iremos usar um position:absolute, e o absolute ele calcula a posição de acordo com body, se não existe outro elemento declarado como relative, absolute, fixed, caso tenha declarado, ele vai se posicionar de acordo com esses elementos com essas declarações, dando um limite para sua posição.

Agora vamos começar o efeito, o que queremos? Que as sub-listas não apareçam por padrão e ao passar o mouse na lista, ele apareça.

#menu li ul{

display:none;/*define para não aparecer a ul*/
position:absolute; /*define uma posição absolute*/
width:150px;/*define uma largura*/
top:0; /*colocamos top com 0*/
left:149px; /*afastamos para esquerda 149px, 1px a menos do que largura da ul*/

}

Desaparecemos a sub-listas, posicionamos ela para o lado esquerdo para aparecer quando utilizarmos a pseudo-classe :hover na li. Então vamos fazer isso:

#menu li:hover ul{
display:block;
}

Funcionou (se você não estiver usando o IE6, não quero nem imaginar porque raios você estaria usar essa coisa), mas não como imaginávamos. Ele aparece todos os itens, e não é isso que queremos. Como faremos pare resolver isso? Chorar? Chamar a sua mãe? Xingar qualquer pessoa que se aproximar? Claro que não, vamos declarar ao passar o mouse na li, que o sub-sub-item não apareça.

#menu li:hover ul ul{display:none}

O que fizemos foi dizer que passar o mouse na li, não apareça a lista que está no sub-menu. Agora para aparecer basta dizer que ao passar o mouse na li que está dentro do sub-meu aparecer todo o item.

#menu ul li:hover ul{display:block;}

Agora funcionou! E o IE6? Claro não iria funcionar, já que essa praga do IE6 não aceita a pseudo-classe hover sem ser nos links. Existem várias soluções para isso, na maioria dos casos usando javascript. Em uma vídeo aula sobre dropdown ,ensino com resolver. Mas vou propor outra solução usando jquery.

$(document).ready(function(){
			$("#menu li").hover(function(){
				$(this).find('ul:first').css('display', 'block');
			}, function(){
				$(this).find('ul:first').css('display', 'none');
			});

});

O script é simples, apenas indica pegar a primeiro item da ul q está dentro da li, e ao sair o mouse da li, volta a ser display none.

Mas se você reparar também dará outro problema no IE6(nem sei por que estou ensinando a consertar nesse negócio), fica um espaço ao passar o mouse, para isso basta colocar um hack na li, e coloco float:left

#menu li{_float:left}

Agora está funcionando tudo certinho, vamos ver como ficou tudo:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
 
	<li><a href="#">Home</a></li> 
	<li><a href="#">Serviços</a>
 		<ul>
		 
			<li><a href="#">Web</a></li> 
			<li><a href="#">SEO</a></li> 
			<li><a href="#">Gráfico</a>
		 		<ul>
					<li><a href="#">Cartão</a></li>
					<li><a href="#">Panfleto</a></li>
					<li><a href="#">Banner</a></li>
				</ul>
 
			</li>
 
		</ul>
 
	</li> 
	<li><a href="#">Produtos</a></li>
 	<li><a href="#">Contato</a></li>
</ul>
	
	<script type="text/javascript"> 
		$(document).ready(function(){
			$("#menu li").hover(function(){
				$(this).find('ul:first').css('display', 'block');
			}, function(){
				$(this).find('ul:first').css('display', 'none');
			});

			});
	</script>
</body>
</html>

Estilo.css

*{
margin:0;
padding:0;
}

ul{list-style-type:none}

a{text-decoration:none}

a:hover{text-decoration:underline}

#menu{width:150px}

#menu li{position:relative; _float:left}

#menu li a{
display:block;
height:25px;
line-height:25px;
color:#777;
border-bottom:1px solid #ccc;
background:#f5f5f5;

}

#menu li a:hover{
background:#e5e5e5;
color:#333;

}

#menu li ul, #menu li:hover ul ul{
display:none;
position:absolute;
width:150px;
top:0;
left:149px;
}

#menu li:hover ul,
#menu ul li:hover ul{
display:block;
}

Aqui está o link para download. Até a próxima!

Download