Criar um menu Dropdown com HTML e CSS

bom dia boa tarde boa noite a todos aqui quem fala é o Vitor e no vídeo de hoje nós vamos aprender a como criar um menu drop Town ou seja o menuzinho que aparece as opções abaixo ao passar o mouse igualzinho esse que você tá vendo ao lado usando apenas HTML e CSS bom gente então vamos lá primeira coisa que a gente vai fazer aqui vamos abrir o nosso vscode Tá eu já deixei criado o nosso diretório aqui drop dá um vídeo e vamos criar aqui o nosso primeiro arquivo chamado index.html beleza nesse index a

gente já pode criar uma estrutura padrão do HTML5 beleza e Vamos alterar aqui algumas coisas vão alterar primeiro o idioma e segundo Vamos alterar o nosso título para drop Down beleza legal agora que a gente já pode começar a criar o nosso conteúdo dentro da página dentro do Body Vamos criar tag semântica nave e dentro do nave a gente vai criar uma lista não ordenada tá e dentro dessa lista vai ter o conteúdo da nossa barra de navegação a gente vai fazer uma barra de navegação padrão de website onde geralmente tem aquela página inicial home

sobre contatos serviços e dentro do item serviços a gente vai criar uma sub lista ou seja nosso drop Down menu é contendo o serviços que tem disponibilizado nesse site Tá então vamos lá primeiramente a gente dentro da nossa web aqui vamos criar um l.i tá e dentro desse ali a gente vai criar o nosso primeiro link que vai ser a página home Beleza agora a gente pode pegar essa estrutura que a gente criou só dar um control c copiar logo abaixo e aqui pode ser o nosso sobre e abaixo do sobre a gente pode dar

mais um control V colocar aqui serviços e abaixo de serviços a gente pode dar mais um control V Onde vai ser a nossa contato Beleza o início do nosso conteúdo já tá previamente criado Vamos abrir aqui com LED server para ver como é que tá ficando as nossas alterações Então vamos lá nossos links primeira coisa que a gente criou foi uma lista com home sobre serviços e contatos e agora que que a gente vai fazer vamos começar a estilizar um pouco para já melhorar o nosso visual e a gente já começar a entender melhor o

que tá acontecendo Vamos criar um item novo aqui um novo arquivo chamado Style CSS e na Índia que se a gente já importa esse estádio aqui então Vamos colocar link tá e dentro do HIV no link a gente vai importar o nosso Style ponto CSS agora tudo que a gente fizer de utilização aqui já vai aplicar para o nosso documento a primeira coisa que a gente vai fazer vamos resetar o nosso documento Tá então vamos tirar a margem vamos tirar o padrinho e vamos deixar o box sizen box size como border Box tá o boxer

Box lembrando é tudo que for aplicado no objeto filho ele vai não vai transpassar do objeto pai tá vamos lá então a primeira coisa que a gente vai fazer vamos mudar o background do nosso nave para deixar mais visível para a gente o que que tá acontecendo aqui na nossa dívida no nosso nave vamos lá nave Vamos colocar um background color Por exemplo essa cor Aqui ó pode ver que já mudou aqui para a gente dá o fundo Ficou meio ruim de ler mas a gente ainda vai dar uma ajustada tá então dentro aqui agora

do nosso nave a gente tem que posicionar o que o nosso l.i tá porque o li porque você pode ver que é que ele tá home sobre serviços de contato um abaixo do outro a gente não quer isso a gente quer um ao lado do outro como geralmente era uma barra de navegação de site Tá então vamos lá na Veli a gente vai fazer um display em Line Block pode ver aqui ó que ele já posicionou um ao lado do outro agora tá ficando mais próximo do que a gente quer mas ainda tá muito ruim

de ler né então vamos criar aqui logo abaixo Vamos criar um nave l i a agora a gente quer personalizar o que o nosso link aqui exatamente o que tá dentro do li ou seja Vamos aqui na nave Lia Vamos colocar primeiro um color por exemplo como White uma cor branca ó pode ver que já ficou muito melhor de visualizar agora mas eu não quero essa esse underline aqui sobre a sobre as palavras Então vamos colocar em textos ó já melhorou muito do que tava né mas vamos fazer mais uma coisa aqui tá muito próximo

ao outro então vamos dar um padrinho de 15 pixels por exemplo agora já deu um espaçamento legal mas a gente pode ver o que que a barra ela tá muito pequena ainda e mesmo dando padding ele não aplicou na vertical porque porque até guiar por padrão ela é só online em Line itens inline margem e pedem são aplicadas apenas na horizontal Então vamos mudar o display dessa tag para inline Block também olha só como já ficou melhor agora o pedem ele pega tanto na vertical quanto na horizontal e deixa o espaçamento visualmente bacana de olhar

né então vamos lá então a primeira parte aqui da nossa da nossa barra de navegação já tá criada aqui o corda ela já tá feito a gente pode até dar uma colocar aqui por exemplo um nave Lia por exemplo a gente pode colocar um back color Edge só para quando a gente passar o mouse em cima ele alterar a cor aqui que a gente está vendo né então vamos lá agora o que que a gente quer fazer a gente quer colocar uma sub lista de serviços aqui que é o intuito principal do nosso vídeo então

vamos aqui dentro da nossa li Onde está HC serviços Vamos colocar aqui uma classe drop Down e aqui tudo que foi referente a drop Down vai estar dentro dessa lei aqui e abaixo aqui da nossa fechamento da guiar a gente pode colocar alma div beleza essa de ela vai ter a Class drop Down menu aqui vai estar o nosso menu e dentro do nosso menu que que nós vamos ter nós vamos é a lista de serviço que a gente quer exibir então a gente pode simplesmente pode até copiar aqui ó Beleza cola Vamos jogar uns

três serviços e a gente pode colocar aqui serviço um serviço dois serviço três vão ser os serviços que vão ser listados você percebe que ao salvar olha o jeito que ele tá aparecendo aqui para gente não é isso que a gente quer né Então vamos dar uma melhorada nisso aqui agora a primeira coisa que a gente vai fazer vamos descer aqui um pouquinho vamos trabalhar já direto na classe drop Down menu tá E vamos colocar aqui por exemplo aliás Vamos colocar aqui por exemplo um display Block porque agora a gente não quer mais ele na

horizontal a gente quer que ele seja exibido na vertical beleza só que aqui ele não tá ainda do jeito que a gente quer ele tá exibindo dentro do nosso nave aqui de um jeito que não tá muito bacana né então vamos fazer o seguinte acima aqui do Drop dá um menu Vamos colocar um drop Down menu sem o agora tá que a gente quer pegar a raiz a nossa dívida ao menu e aqui vamos dar primeiro um position tá Absolut pode ver ó que agora ele já tá aqui abaixo para a gente tá ou seja

tá Teoricamente na posição que a gente realmente queria mas vamos melhorar isso aqui tá vamos colocar aqui as cores Vamos mudar cor para ficar visivelmente melhor para gente colocar um cor Black beleza aqui já tá o nosso drop Down menu Teoricamente é isso que a gente quer mesmo tá só que a gente precisa fazer mais algumas alterações Vamos colocar aqui por exemplo para melhorar nossa visualização Vamos colocar uma borda borda um pixel sólido Black só para a gente visualizar que o conteúdo do nosso menu tá aliás vamos até melhorar isso aqui vamos colocar um box

Shadow zero zero dois pixels Black beleza unboxing Box Shadow acho que é mais bonito que o que uma borda fica mais estiloso pelo menos Então vamos lá é o que que a gente quer fazer a gente não quer que esse menu seja exibido por padrão não quer que ele fique pendurado aqui assim a gente quer que quando passe o mouse aqui ele exiba para gente então o que a gente vai fazer vamos pegar aqui o drop Down menu e vamos dar um display online não display não exibir ele por padrão Ou seja quando tiver aqui

ó display não vai estar exibindo na tela aqui pra gente e agora qual que vai ser o pulo do gato aqui para fazer ele exibir ao final aqui do Drop Down a gente pode criar mais uma drop Down menu não a gente vai pegar no drop Down tá porque quando a gente passar o mouse aqui ó em cima da l drop Down em cima desse cara aqui a gente vai passar o mouse a gente vai querer que o drop Down menu tá então recapitulando quando passar o mouse o Rover é passar o mouse sobre quando

passar o mouse em cima do item drop Down a gente vai querer que a ação seja realizada no drop Down menu tá essa é o nosso intuito Então a gente vai querer que o drop dá um menu tem um display Block Vamos testar se está funcionando Vamos lá por padrão não tá aparecendo se eu passar o mouse Olha lá já apareceu o nosso drop Down aqui com os nossos itens Ah quero adicionar mais um serviço não tem problema pode adicionar aqui mais dois por exemplo surge os quatro serviços 5 Quando eu pegar aqui sobre drop

Down ele vai ter aqui a nossa lista de serviços beleza Esse é um jeito bem simples mas bem funcional de criar um drop Down e para você praticando alguns conceitos isso é muito útil tá bom galera bom pessoal chegamos ao fim de mais um tutorial eu vou estar disponibilizando o código no github como sempre tá então vocês podem estar baixando lá consultando se tiver alguma dúvida certo é personalizem à vontade brinque com customizem isso é ótimo para aprender para praticar tá bom se vocês gostaram do vídeo deixe o seu like se inscreva no canal dê

sugestões de melhorias sugestões de tutoriais que vocês querem que eu traga aqui referente a tecnologia programação ou até outros assuntos se gostarem tá bom e até a próxima valeu