The dropdown does not work for me

0

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">&#9776;</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 !!

    
asked by Fcr 28.02.2018 в 20:39
source

0 answers