dev [Free] - Sistema de Menus/Sub-Menus

HolfSz · Março 8, 2018

Sistema de Menus/Sub-Menus.

Crie um Arquivo Bloco de Notas/Notepad++

Salve como index.html

E Cole o Seguinte Codico:

<!DOCTYPE html>
<html>
<head>
<style>
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%;
}
</style>
</head>
<body>

<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 -->
                    <!-- Importante @Symz -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Importante @Symz -->
                            <!-- Importante @Symz -->
                            <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><!-- Importante @Symz -->
                        </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><!-- Importante @Symz -->
                </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><!-- Importante @Symz -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>
 
</body>
</html>

CODICO FEITO POR MIM!

zPikachuEz_ · Março 8, 2018

não entendi '-'

champS · Março 8, 2018

poderia deixar uma print do resultado né..

zPikachuEz_ · Março 8, 2018

poderia deixar uma print do resultado né..

@edit topico errado

Editado Março 8, 2018 por zPikachuEz_

Entrar

dev [Free] - Sistema de Menus/Sub-Menus

Posts Recomendados

HolfSz

Link para o comentário

Compartilhar em outros sites

zPikachuEz_

Link para o comentário

Compartilhar em outros sites

champS

Link para o comentário

Compartilhar em outros sites

zPikachuEz_

Link para o comentário

Compartilhar em outros sites

Participe da Conversa

Conteúdo Similar

Popular Agora

Quem está navegando 0 membros estão online

Equipe