Criando menu horizontal Dropdown com HTML e CSS

Um menu Dropdown abre um submenu quando o mouse passa sobre um item.

Publicado em 17/11/2020 21:10

Hoje vamos criar um simples menu dropdown, que nada mais é, do que aqueles menus que quando o usuário passa o mouse sobre um item da lista, um novo menu aparece em baixo, contendo novos conteúdos.

Podemos fazer menus Dropdown de diversas formas, mas aqui, vamos usar apenas o HTML e CSS para criar um menu na horizontal.

Criando menu horizontal Dropdown com HTML e CSS

Imagem 1: Resultado final do projeto

A lógica do menu é bem simples, basicamente colocamos uma nova lista dentro de um elemento <li>, e quando passamos o mouse sobre esse item, alteramos a propriedade display da lista interna, que por padrão, está oculta.

Assista a nossa videoaula abaixo, ensinando o passo a passo de como criar o menu, logo em seguida, você confere o código fonte.

index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu dropdown</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav class="dp-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Produtos</a>
                <ul>
                    <li><a href="#">Jogos</a></li>
                    <li><a href="#">Filmes</a></li>
                    <li><a href="#">Animes</a></li>
                    <li><a href="#series">Séries</a></li>
                    <li><a href="#">Notícias</a></li>
                </ul>
            </li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">Quem somos</a></li>
        </ul>
    </nav>
</body>

</html>

style.css

:root {
    --cor-fundo: rgb(34, 41, 37);
    --cor-hover: rgb(118, 180, 145);
    --cor-primaria: rgb(231, 241, 236);
}

.dp-menu ul {
    list-style-type: none;
    padding: 0;
}

.dp-menu ul {
    background-color: var(--cor-fundo);
}

.dp-menu ul li {
    display: inline;
    position: relative;
}

.dp-menu ul li a {
    color: var(--cor-primaria);
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    transition: background .3s;
}

.dp-menu ul li a:hover {
    background-color: var(--cor-hover);
}

/*sub menu*/
.dp-menu ul ul {
    display: none;
    left: 0;
    position: absolute;
}

.dp-menu ul li:hover ul {
    display: block;
}

.dp-menu ul ul {
    width: 150px
}

.dp-menu ul ul li a {
    display: block;
}

Por hora é isso, espero que tenha gostado e que tenha aprendido.