I was trying to make a hamburger menu (collapsible menu) in HTML and CSS for mobile but it broke the dropdown for bigger screens and I can not find the turn to make it work again.
I enclose the HTML code and the CSS
HTML:
<div class="nav">
<label for="nav__checkbox" class="nav__toggle">☰</label>
<input type="checkbox" id="nav__checkbox"/>
<div class="nav__menu">
<li class="nav__menu__option"><a class="nav__menu__option--a" href="sitios/discografia.html">Discografia</a>
<ul class="nav__menu__menudes">
<li class="nav__menu__menudes__listmenu"><a class="nav__menu__menudes__listmenu__linkMenu" href="sitios/tib.html">Three Imaginary Boys</a></li>
<li class="nav__menu__menudes__listmenu"><a class="nav__menu__menudes__listmenu__linkMenu" href="sitios/ss.html">Seventeen Seconds</a></li>
<li class="nav__menu__menudes__listmenu"><a class="nav__menu__menudes__listmenu__linkMenu" href="sitios/f.html">Faith</a></li>
<li class="nav__menu__menudes__listmenu"><a class="nav__menu__menudes__listmenu__linkMenu" href="sitios/p.html">Pornography</a></li>
</ul>
</li>
<a class="nav__menu--a" href="sitios/contrataciones.html">Contrataciones</a></a>
<li class="nav__menu__option"><a class="nav__menu__option--a" href="sitios/miembros.html">Miembros</a>
<ul class="nav__menu__menudes">
<li class="nav__menu__menudes__listmenu"><a class="nav__menu__menudes__listmenu__linkMenu" href="sitios/rs.html">Robert Smith</a></li>
<li class="nav__menu__menudes__listmenu"><a class="nav__menu__menudes__listmenu__linkMenu" href="sitios/sg.html">Simon Gallup</a></li>
<li class="nav__menu__menudes__listmenu"><a class="nav__menu__menudes__listmenu__linkMenu" href="sitios/lol.html">Laurence "Lol" Tolhurst</a></li>
</ul>
</li>
</div>
</div>
CSS:
.nav {
text-align: center;
line-height: 70px;
width: 65%; }
.nav__toggle {
/*nav__toggle*/
visibility: hidden; }
.nav__menu {
/*nav__menu*/
margin: 0 30px 0 0; }
.nav__menu--a {
/*nav__menu--a*/
text-decoration: underline;
color: white;
margin: 0 1em; }
.nav__menu--a:hover {
color: black;
background-color: white; }
.nav__menu--a:hover .nav__menu__menudes {
display: block; }
.nav__menu__option {
display: inline-block;
padding: 6px; }
.nav__menu__option--a {
text-decoration: underline;
color: white;
margin: 0 1em; }
.nav__menu__option--a:hover {
color: black;
background-color: white; }
.nav__menu__menudes {
display: none;
background-color: black;
margin: 0;
padding: 0;
position: absolute; }
.nav__menu__menudes__listmenu {
padding: 5px;
z-index: 2;
display: block;
background-color: black;
width: 140px;
position: relative; }
.nav__menu__menudes__listmenu__linkMenu {
color: white;
padding: 2px; }
.nav__menu__menudes__listmenu:hover {
color: black;
background-color: white; }
Thank you very much !!