Exercício de Programação #04 - CSS - Menu Dropdown

28/10/2020

Nesse tutorial trabalharemos com um exercício de CSS visando aprimorar nossas técnicas em estilizar nossos websites.

Menu Dropdown com CSS

Para criar o menu dropdown nós criaremos dois arquivos, o arquivo index.html e o arquivo style.css.

index.html

Receberá os elementos de marcação do website.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Menu Dropdown</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul>
        <li>Home</li>
        <li>
            Serviços
            <ul>
                <li>Criação de Sites</li>
                <li>Apps</li>
                <li>Fotografia</li>
            </ul>
        </li>
        <li>
            Contatos
            <ul>
                <li>Email</li>
                <li>Telefone</li>
            </ul>
        </li>
    </ul>
</body>
</html>

style.css

No arquivo css faremos a estilização pra funcionar nosso menu dropdown:

*{margin:0; padding:0; box-sizing: border-box;}

ul{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3,30%);
    justify-content: space-between;
    text-align: center;
    font-size: 18px;
    font-family: Arial, sans-serif;
}

li{cursor: pointer;}

ul li ul{
    display:none;
}

ul li:hover ul{
    display:block;
}

ul li ul li{
    background: #ccc;
    padding: 10px;
    font-size: 16px;
}

ul li ul li:hover{
    background: #333;
    font-size: 16px;
    font-weight: bold;
    color:#fff;
}

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Exercício de Programação #03 - PHP - Comparação entre Datas

No exercício de hoje o aluno deverá fazer uma comparação entre a data digitada pelo usuário e data de hoje, utilizando para isso o PHP.

Exercício de Programação #05 - JS - Contagem e Limite de Caracteres

Nesse exercício faremos a contagem dos caracteres de entrada do usuário e exibiremos o limite de caracteres e bloquearemos as inserções após o limite.

Exercícios

Nessa playlist aprenderemos na prática a programar, utilizando para isso exercícios de programação nas mais variadas linguagens e tecnologias.