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.

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.