为什么我的菜单项在桌面大小时不显示？

Question

我按照this教程创建了响应式汉堡菜单。但是我不知道为什么我的屏幕是桌面大小时菜单项不显示。

当屏幕为移动尺寸时，我可以单击汉堡菜单，然后出现项目。如果在菜单“打开”时将屏幕放大到桌面尺寸，它们确实会以我想要的方式出现（由于媒体查询）。但是，当我刷新页面时（屏幕为桌面大小），菜单项不会出现。我似乎无法弄清楚，如果您发现我的错误，请提供帮助。谢谢！

这就是我想要的：

这就是我现在得到的：

这是我缩放到手机屏幕时所得到的：

body {
  margin: 0;
  background-color: #fff;
}
.header {
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 3;

    .menu-btn {
        display: none;

        &:checked ~ .menu {
            max-height: 240px;
        }

        &:checked ~ .menu-icon .nav-icon {
            background: transparent;

            &:before {
                transform: rotate(-45deg);
                top: 0;
            }

            &:after {
                transform: rotate(45deg);
                top: 0;
            }
        }
    }
    .menu-icon {
        padding: 28px 20px;
        position: relative;
        float: right;
        cursor: pointer;

        .nav-icon {
            background: #333;
            display: block;
            height: 2px;
            width: 18px;
            position: relative;
            transition:background .2s ease-out;

             &:before {
                 background: #333;
                 content: "";
                 display: block;
                 height: 100%;
                 width: 100%;
                 position: absolute;
                 transition: all .2s ease-out;
                 top: 5px;
             }

             &:after {
                background: #333;
                content: "";
                display: block;
                height: 100%;
                width: 100%;
                position: absolute;
                transition: all .2s ease-out;
                top: -5px;
             }

        }

    }

    .menu {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        background-color: #fff;
        color: #403e3f;
        clear: both;
        max-height: 0;
        transition: max-height .2s ease-out;

        li {

            a {
                display: block;
                padding: 20px;
                border-right: 1px solid #aaa;
                text-decoration: none;

            }
        }

    }
}

@media (min-width: 48em) {
    
    li {
        float: left;

        a {
            padding: 20px 30px;
        }
    }

    .menu {
        clear: none;
        float: right;
        max-height: none;
    }

    .menu-icon {
        display: none;
    }
}

<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
      <li><a href="#">oplossingen</a></li>
      <li><a href="#forget">product</a></li>
      <li><a href="#forget">about</a></li>
</header>

Answer 1

您需要删除媒体查询中菜单上的max-height: 0;和max-height:250px并将其设置为height: auto;，以使该菜单出现在桌面中。

更新我已经修改了代码段，现在可以使用。

body {
  margin: 0;
  background-color: #fff;
}

.header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 3;
}

.menu-btn {
  display: none;
}
.menu-btn:checked ~
.menu {
  height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top: 0;
}

.menu-icon {
  padding: 28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}

.nav-icon {
  background: #333;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}
.nav-icon:before {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}
.nav-icon:after {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
  color: #403e3f;
  clear: both;
  height: 0;
  transition: height .2s ease-out;
}
.menu a {
  display: block;
  padding: 20px;
  text-decoration: none;
}

@media screen and (min-width: 48em) {
  .menu-icon {
    display: none;
  }

  .menu {
    float: right;
    height: auto;
  }
  .menu li {
    display: inline-block;
  }
}

<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
      <li><a href="#">oplossingen</a></li>
      <li><a href="#forget">product</a></li>
      <li><a href="#forget">about</a></li>
</header>