Responsive submenu doesn't show on small screen

问题

My first question here although I found a lot of good answers already.

I have a simple flex-box based menu that stacks when it goes responsive but the submenus for some reason don't show listed below the main link (e.g. Graphical Design). Instead, only the first submenu item covers the main link.

Also, after being toggled, the 3 lines disappear and "About" and "Contact" show white background when hovered over instead of blue-green as the rest.

I've been struggling with this for 5 days already and I'm out of ideas. Had to concede and ask for help.

CodePen attached: https://codepen.io/abudimir/pen/agQzKP

<nav>
            <input type="checkbox" id="checkbox"/>
                <label for="checkbox">

            <ul class="menu">
                <li><a href="">About</a></li>

                <li><a href="">Graphical Design</a>
                    <ul class="hidden">
                    <li><a href="#">Branding</a></li>
                    <li><a href="#">Graphical Design</a></li>
                    <li><a href="#">Editorial</a></li>
                    <li><a href="#">Packaging</a></li>
                    </ul>
                </li>

                <li><a href="">Interior Design</a>
                    <ul class="hidden">
                    <li><a href="#">Private Spaces</a></li>
                    <li><a href="#">Public Spaces</a></li>
                    </ul>
                </li>

                <li><a href="">Arts / Illustrations</a>
                    <ul class="hidden">
                    <li><a href="#">Water Color</a></li>
                    <li><a href="#">Wall Painting</a></li>
                    </ul>
                </li>

                <li><a href="">Contact</a></li>
            </ul>
                <span class="toggle">☰</span>
            </label>
        </nav>

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

#checkbox,
.toggle {
  display: none;
}

nav {
  text-align: center;
  width: 100%;
  /*     max-width: 100%; */
  height: 3rem;
}

/* Top links container */

.menu {
  margin: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

/* Top links items */

.menu li a {
  display: block;
  font-size: 1.2rem;
  transition: background 0.2s linear;
  /* property, duration, timing-function, delay */
}

/* Top links hover */

.menu li a:hover {
  background: rgb(255, 255, 255);
  width: 100%;
}

/*Dropdown links*/

nav li:hover ul a {
  background: rgb(255, 255, 255);
  line-height: 2rem;
  padding: 0.7rem 0;
}

/*Hover state for dropdown*/

nav li:hover ul a:hover {
  background: rgb(25, 183, 197);
  color: rgb(255, 255, 255);
}

/* Hide dropdown links until they're needed. */

nav li ul {
  display: none;
}

/*Make dropdown links vertical*/

nav li ul li {
  display: block;
  float: none;
}

/* Display the dropdown on hover */

nav ul li a:hover+.hidden,
.hidden:hover {
  display: block;
  position: absolute;
}

/* Make submenus the same width as parent. */

nav ul li {
  position: relative;
}

nav ul li ul {
  width: 100%
}

/* ************************************************************* */

/* MOBILE MENU */

@media screen and (max-width: 600px) {
  .menu {
    margin: 0;
    position: absolute;
    width: 100%;
  }
  .menu li a {
    font-size: 1rem;
    position: absolute;
  }
}

@media screen and (max-width: 550px) {
  .menu {
    margin: 0;
  }
  .toggle {
    clear: both;
    display: block;
    text-align: center;
    font-size: 1rem;
    line-height: 2.7em;
    /* position of 3 lines */
    width: 100%;
    height: 3rem;
    font-size: 18px;
    background: rgb(255, 255, 255);
    color: rgb(25, 183, 197);
    /* of the 3 lines */
    transition: all .1s linear;
  }
  .toggle:hover {
    background: rgb(0, 255, 21);
  }
  #checkbox:checked+label .menu li {
    opacity: 1;
    visibility: visible;
    transition: all .7s linear;
  }
  #checkbox:checked+label .menu {
    height: 15rem;
  }
  .menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    transition: height .3s linear;
    background: rgb(247, 0, 255);
  }
  .menu li {
    display: flex;
    align-self: center;
    width: 100%;
    opacity: 0;
    visibility: hidden;
  }
  .menu li a {
    width: 100%;
    text-align: center;
    align-self: center;
    align-content: center;
    background: rgb(247, 0, 255);
  }
  main {
    /* Move images a bit down */
    margin-top: 1rem;
  }

来源：https://stackoverflow.com/questions/56936267/responsive-submenu-doesnt-show-on-small-screen