Publicado em 10 de jun.

Métodos para fazer menu dropdown?

Galera, eu já li vários livros de HTML, cursos e vídeos, porém, eu aprendi só teoria. Resolvi colocar em prática, uma vez que eu entendia qual a função de cada tag.

Agora que estou praticando, percebi que ao replicar um template free eu consigo fazer tudo, mas depois não sei refazer, com facilidade. Depois disso, passei a focar em aprender como fazer o menu, sem outros conteúdos, em código.

Passadas frustrações com a "trollagem do CSS" (posicionando onde eu não quero <_<), consegui entender melhor esta linguagem e estruturar o dropdown, porém, continuo com alguns problemas, que só poderão ser entendido se vocês usarem os seguinte códigos, em vossos navegadores e me informarem o que se passa e como resolver.

*Ps: Estou usando somente o básico do CSS, junto com HTML, para praticar o segundo. Depois, vou ler mais sobre CSS e me aprofundar mais.

Ps II: Em qual momento vocês acham que devo começar à aprender frameworks, como bootstrap?*

<!DOCTYPE html>

<html>
<head>
	<meta charset="UTF-8">
	<title>Teste!</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<nav>
 <ul class="menu">
 <li>
 <a href="#">Lista 1</a>

 <ul class="submenu">
 <li>
 <a href="#">Lista 1.1</a>
 </li>

 <li>
 <a href="#">Lista 1.2</a>
 </li>
 </ul>

 </li>

 <li>
 <a href="#">Lista 2</a>

 <ul class="submenu">
 <li>
 <a href="#">Lista 2.1</a>
 </li>

 <li>
 <a href="#">Lista 2.2</a>
 </li>
 </ul>

 </li>

 </ul>
	</nav>
</body>
</html>

ul{

	list-style: none;
	text-align: center;
}

	text-decoration: none;
}

.menu{
	border: 5px solid greenyellow;
	padding: 0;
	margin: 20px;
	position: absolute;
}

.menu li{

	border: 2px solid green;
	display: inline-block;
	margin: 0;
}

.submenu{
	display: none;
	margin: 0;
	border: 2px solid black;
}

.submenu li{

	display: block;
	position: relative;
}

.menu li:hover .submenu{

	display: block;
	border: 2px solid red;
	padding: 0;
}

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

AndersonMamede· 10 de jun.

Olá.

Fiz algumas alterações no seu código CSS, dá uma olhada (está comentado onde eu alterei):

https://jsfiddle.net/08h22bzk/3/

Quanto aos frameworks, eles são uma ótima escolha para aumentar a produtividade. Mas se você não souber o básico da linguagem, você não vai entender o que você está fazendo e qualquer probleminha simples vai te fazer gastar um tempão, além de que o código vai ficando uma bagunça com gambiarras e CTRL+C/CTRL+V.

snowstormdelivery· 10 de jun.

Olá.

Fiz algumas alterações no seu código CSS, dá uma olhada (está comentado onde eu alterei):
https://jsfiddle.net/08h22bzk/3/

Depois dessa, o melhor e ler sobre CSS, mesmo. Obrigado!

AndersonMamede· 10 de jun.

E outra... se você souber a linguagem, você se adapta fácil à qualquer framework... mas se você focar em aprender um framework e não a linguagem, você vai ficar preso à ele. E frameworks vem e vão, de tempos em tempos aparece um melhor, mais fácil, mais simples, mais produtivo etc.