html - 响应式子菜单不显示在小屏幕上

Question

我在这里的第一个问题虽然我已经找到了很多好的答案。

我有一个简单的基于弹性框的菜单，当它响应时会堆叠，但由于某种原因，子菜单没有显示在主链接下方（例如图形设计）。相反，只有第一个子菜单项涵盖主链接。

此外，在切换后，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">☰&lt;/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;
  }

标签： htmlcssresponsive-designflexbox