Menu Horizontal Dropdown 3 Níveis

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.

menu horizontal dropdown 3 níveis 1

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...

menu horizontal dropdown 3 níveis 2

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...

menu horizontal dropdown 3 níveis 3

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.

Publicidade

Gostou? Compartilhe com seus amigos!

Ícone Facebook Ícone Twitter Ícone Linkedin
Comentários

Comentários

Camila de Andrade Camargo Camila de Andrade Camargo
Seta comentário
Olá, fiz como você disse, e funciona quando está na lateral, mas quando arrasto o gadget para ficar abaixo do título do meu blog teste, os submenus não abrem, o que devo mudar?

http://produtoradefilmescampinas.blogspot.com.br/

Aguardo resposta!

obrigada
Responder Postado em: 06/01/2016 11:12:10
Everson da Luz Everson da Luz
Seta resposta
Olá, você está usando um template do blogspot, por isso já deve vir várias regras que talvez afetem o menu que produzi, por isso você deve tentar adapta-lo ao seu ambiente, mas eu não posso te ajudar sem visualiza-lo no site, nesse link que você postou não consta o menu.

Obrigado pelo comentário
Postado em: 06/01/2016 23:27:12
Marcos Lobão Marcos Lobão
Seta comentário
Everson, adorei a sua explicação. Simples, objetiva e resolveu o meu problema.

Muito obrigado!
Responder Postado em: 24/09/2016 13:28:51
Everson da Luz Everson da Luz
Seta resposta
Fico feliz que tenha te ajudado Marcos, obrigado :D
Postado em: 25/09/2016 22:56:45
Acival dos Santos Acival dos Santos
Seta comentário
Gostaria de aprimorar  meus estudos css,,,por favor vc pode mim ajudar?
Responder Postado em: 21/01/2017 15:11:55
adilson paraguai adilson paraguai
Seta comentário
Muito obrigado por vc disponibilizar esse conteúdo vai mim ajuda muito, além desse material vc tem algum de layout disponível?
Responder Postado em: 29/03/2017 16:06:29
Everson da Luz Everson da Luz
Seta resposta
Não tenho nenhum layout desenvolvido para esse menu, ele é apenas um esqueleto, agora basta utiliza-lo e melhora-lo conforme sua necessidade.
Postado em: 30/03/2017 20:19:17
martir silva martir silva
Seta comentário
amigo a forma que voce vez nao da para encaixa no meu blog de teste, tem como mim ajuda

https://martiresportes3.blogspot.com.br/
Responder Postado em: 25/07/2017 16:23:32
Everson da Luz Everson da Luz
Seta resposta
Olá Martir, você colocou o CSS no seu blog? Não achei ele em seu código
Postado em: 29/07/2017 18:39:29
Comentários

Deixe um comentário

Subir Página