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;
}
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;
}Discussão (3)
Carregando comentários...