Menu HTML com CSS com submenu e subníveis

Nenhum produto encontrado nessa seleção.

Provavelmente você já deve ter visto, ou até precisado, de um menu HTML com CSS com submenu e subníveis. Por subníveis, quero dizer que os submenus podem ter vários outros submenus dentro deles.

Neste vídeo tutorial vou detalhar como criar tal menu utilizando apenas CSS, sem nada de JavaScript. Além disso, o menu suporta quantos submenus forem necessários para seu layout.

Vídeo tutorial

Abaixo o vídeo tutorial detalhando tudo o que você precisa saber:

O código criado no vídeo acima pode ser encontrado em:

• http://codepen.io/luizomf/pen/qFvyg

Você pode editá-lo conforme sua necessidade.

O HTML criado no vídeo

Abaixo segue o HTML criado no vídeo:

<div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">Item</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

 O CSS criado no vídeo

Abaixo segue o CSS criado no vídeo:

body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

Só isso fará seu menu funcionar perfeitamente.

Concluindo

Se tiver algum dúvida, comente-a!