Solucionado
Estou criando um site fictício de e-commerce, porém estou com um problema. Fiz um dropdown menu quando você da hover em uma nav bar, porém não consigo limitar ele à apenas o primeiro item da nav. Já tentei com first child e nth-child e mesmo assim não funciona.
Tentei também criar um id único para o primeiro item da nav e ainda assim não funciona
Aqui está o código
https://github.com/vkindrat/vkindrat.github.io/tree/master/site-loja
Vitor, boa tarde!
Eu não entendi, testando o código vi que o primeiro item do navbar não tem um dropdown implementado, já o link de login possui, e ele está sendo aplicado ao login. O que você está desejando fazer é o mesmo que o link do login no menu?
Aguardo sua resposta e bons estudos!
Que estranho, aqui está funcionando o dropdown nos itens do menu. Você clicou no segundo link? O do login está certo, o problema é o dropdown do menu principal.
O dropdown está sendo ativado independente do item que eu dou hover, sendo que eu queria apenas no item Categorias.
Edit 1: Chequei de novo aqui, e ele está apenas funcionando no test.html. No contato e sobre ainda não está implementado
Edit 2: Agora está implementado nos 3 html's.
Vitor, boa tarde!
Agora eu entendi, isso está ocorrendo pois você está verificando o hover na navbar inteira, e não é isso que você quer é só no primeiro elemento. Então vamos mudar o css para que fique de acordo
#texto-categoria:hover .dropdown-categorias {
display: block;
}Só isso não vai ser o suficiente, pois o dropdown-categorias não está dentro do #texto-categoria:hover. Olhando o html vamos perceber que esses elementos são irmãos, e como nós representamos isso no CSS? Você ainda não deve ter visto, porem, mais a frente no curso nós vemos os seletores e um deles é de elementos irmãos que no caso é o +
#texto-categoria:hover+.dropdown-categorias {
/*Leia o seletor acima ao contrário (Estamos procurando todo .dropdown-categorias que tenha como irmão um texto-categoria com o :hover ativado)*/
display: block;
}Espero ter ajudado e bons estudos!
Deu certo! Muito obrigado. Não conhecia esse seletor + ainda.
Só uma dúvida, por que isso não funciona?
.cabecalho-nav:first-child:hover. dropdown-categorias
{ display: block }
o primeiro filho do cabecalho não é o categorias? O nth-child também nao funciona. Outra coisa, teria como colocar o dropdown-categorias dentro do link #texto-categoria?
O :first-child não é em relação ao filho do elemento, mas ao próprio elemento, você está escolhendo o primeiro elemento .cabecalho-nav (que só tem um então ele sempre será executado) do pai dele, que nesse caso é o header, o nth-child funciona da mesma maneira.
Sobre segunda dúvida teria, sim e nesse caso eles não seriam mais irmão sendo assim não seria mais necessário o seletor +