Адаптивное подменю не отображается на маленьком экране

Question

Мой первый вопрос здесь, хотя я уже нашел много хороших ответов.

У меня есть простое меню на основе flex-box, которое складывается, когда оно становится отзывчивым, но подменю по некоторым причинам не отображаются в списке нижеглавная ссылка (например, графический дизайн).Вместо этого только первый элемент подменю покрывает основную ссылку.

Кроме того, после переключения 3 строки исчезают, и «О нас» и «Контакт» показывают белый фон при наведении курсора вместо сине-зеленого, как остальные.

Я борюсь с этим уже 5 дней, и у меня нет идей.Пришлось уступить и попросить о помощи.

CodePen прилагается: 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;
  }