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




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

22 thoughts on “Sub-Menu com 3 níveis com CSS

  1. e ai David, cadê o portfólio? 🙂 to loco pra ver seus projetos, só conheço dois que eu vi no whohub uma vez! põe ai pra agente ver ou me passa uns links.

    PS: sem querer ser chato 🙂

    1. Bz Lucas, a maioria dos meus projetos são em backend, não tem nem como mostrar. Mas tendo algum tempo eu publico alguns site q fiz.

  2. Ficou legal, você explica muito bem.

    Fiz o mesmo efeito só que com Slide porque esse efeito pode ser feito apenas com css.

    Com css:

    ul.menu li:hover>ul{
    display: block;
    })

    Com javascript, efeito slide:

    $(“ul.menu li”).hover(function(){
    $(this).find(“ul:first”).slideDown();
    }, function(){
    $(this).find(“ul”).slideUp();
    });

  3. Muito bom cara, bem explicado! Era o que eu precisava. Parabéns!
    Mas, só uma dúvida, caso eu queira adicionar um submenu em Panfleto

    Cartão
    Panfleto

    Opcao A
    Opcao B

    Banner

    Como ficaria o css para que ao passar o mouse na palavra Panfleto aparecer essas outras opções? Desde já muito obrigado!

    1. Rogerio, vai seguir a mesma logica, algo mais ou menos assim:

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

  4. É compativel com o blogger?
    Não tenho quase nenhuma noção sobre isso.. porém
    futuco algumas coisas no HTML que consigo editar xD.

    Quero por esse codigo no meu HTML do blogger, onde colocaria?

  5. Nossa era exatamente o que eu precisava. Obrigada por esse tutorial incrível (e que funciona!), continue assim.

  6. Cara, estou com um problema, o meu submenu está “cortando” a frase do
    Tipo dará duas linhas porém o meu está cortando a segunda linha, o que faço?

  7. Gostei muito.. gostaria de saber como fazer para que somente aparecesse o Home.. ai depois que passe o mouse no Home ai ele mostrasse os outros >Serviços >Produtos >Contatos tem como ?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *