Menu vertical com 3 níveis - CSS

Menus verticais estão presentes em diversos sites e sistemas, um menu de apenas um nível é bem simples de fazer, agora quando é necessário dividi-lo em submenus por causa de seu tamanho, categoria ou conteúdo, aí a coisa começa a ficar um pouco mais complicada. Mas mesmo assim, desenvolver um menu vertical com vários níveis de submenus não é algo muito complicado, por isso nesse artigo demonstrarei de forma simples como fazer um menu vertical com 3 níveis utilizando apenas CSS.

O HTML

Assim como no artigo que escrevi alguns anos atrás sobre como fazer um menu horizontal dropdown 3 níveis, conforme link: Menu Horizontal Dropdown 3 Níveis, um menu vertical com 3 níveis é basicamente o mesmo, ele consiste em uma lista desordenada, que é caracterizada pela tag <ul>, seguido de seus elementos filhos <li>, conforme exemplo:

<nav>
    <ul>
        <li><a href="sobre">Sobre</a></li>
        <li>
            <a href="roupas">Roupas</a>
            <ul>
                <li>
                    <a href="masculino">Masculino</a>
                    <ul>
                        <li><a href="calcas">Calças</a></li>
                        <li><a href="camisetas">Camisetas</a></li>
                        <li><a href="bermudas">Bermudas</a></li>
                        <li><a href="tenis">Tênis</a></li>
                    </ul>
                </li>
                <li>
                    <a href="feminino">Feminino</a>
                    <ul>
                        <li><a href="calcas">Calças</a></li>
                        <li><a href="camisetas">Camisetas</a></li>
                        <li><a href="bermudas">Saias</a></li>
                        <li><a href="sapatos">Sapatos</a></li>
                    </ul>
                </li>
                <li>
                    <a href="infantil">Infantil</a>
                    <ul>
                        <li><a href="toucas">Toucas</a></li>
                        <li><a href="casacos">Casacos</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="brinquedos">Brinquedos</a>
            <ul>
                <li><a href="bonecos">Bonecos</a></li>
                <li><a href="carrinhos">Carrinhos</a></li>
                <li><a href="bolas">Bolas</a></li>
                <li><a href="jogos-de-tabuleiro">Jogos de tabuleiro</a></li>
            </ul>
        </li>
        <li><a href="contato">Contato</a></li>
    </ul>
</nav>

Coloquei o menu dentro da tag <nav>, que caracteriza o menu principal da página.

Além disso, coloquei outros menus dentro de elementos <li> do primeiro nível do menu, isso indica que esse novo menu é o segundo nível do menu, que será mostrado quando o usuário passar o mouse sobre um elemento do primeiro menu, e para fazer o terceiro nível, basta colocar mais um menu dentro do segundo nível, indicando o terceiro menu.

Um CSS para estilizar

Vamos colocar um pequeno estilo no menu, apenas para dar uma melhor visualização em nosso exemplo, mas o estilo final ficará na necessidade de cada um.

ul {
    list-style: none;
    width: 200px;
    margin: 0;
    padding: 0;
}
li {
    position: relative; /* Necessário para flutuar os submenus */
}
a {
    color: #333333;
    border: 1px #38afda solid;
    display: block;
    padding: 10px;
    text-decoration: none;
}
a:hover {
    background-color: #38afda;
    color: #ffffff;
}

Ocultando e mostrando os submenus quando passar o mouse

Para ocultar os submenus é muito simples, basta adicionar esse trecho de código CSS:

li ul {
    display: none;
}

E para mostrar o submenu ao passar o mouse sobre o menu, também é bastante simples, apenas adicione mais esse trecho de código CSS:

li:hover > ul {
    display: block;
}

Colocando os submenus ao lado do menu pai

Até agora o menu vertical com 3 níveis está funcionando como desejado, mas ainda falta fazer ele se posicionar ao lado do menu pai, para deixar mais agradável sua navegação, e para fazer isso é muito simples, basta adicionar esse pequeno trecho de código CSS:

li ul {
    position: absolute;
    left: 100%; /* Posiciona o menu filho ao lado do menu pai */
    top: 0; /* Posiciona o menu filho no topo do menu pai */
}

Conclusão

Simples não? Com pouco código já temos um menu vertical com vários níveis. Você pode adicionar quantos níveis a mais precisar que não precisará alterar o código! Deixarei um link para demonstração e download caso queira ver o código completo.

Demonstração Download