Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

snowstormdelivery

Métodos para fazer menu dropdown?

Por , em Desenvolvimento frontend

Recommended Posts

snowstormdelivery    19

snowstormdelivery
Postado

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;
}

a{
	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; 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

AndersonMamede    88

AndersonMamede
Postado
Olá.


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



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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

snowstormdelivery    19

snowstormdelivery
Postado

 

Olá.
Fiz algumas alterações no seu código CSS, dá uma olhada (está comentado onde eu alterei):
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.

 

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

AndersonMamede    88

AndersonMamede
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito