Меню отзывчивое чистое css

Question

я сделал меню отзывчивым, но не могу скрыть ульи. Я видел много учебных пособий, но я не знаю, что больше касается. здесь я оставил html и css. Многие навигационные меню (особенно отзывчивые) создаются с использованием комбинации HTML, CSS и Javascript. Но этот простой CSS единственный метод должен продемонстрировать, что Javascript не всегда необходим.

            <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span>   </label>     
         <nav>  
         <ul>
        <li  class="one">
        <a href="episodios.html" >EPISODIOS</a>
        </li>
        <li class="two" >
        <a href="nosotros.html">NOSOTROS</a>
        </li>
        <li  class="three"> 
        <a href="entrevistas.html" >ENTREVISTAS</a>
        </li>
        <li class="four">
        <a href="topicos.html" >TOPICOS</a>
        </li>
         </ul>
        </nav> 

header {
  width: 320px;
  height: 80px;
  z-index: 3;
}

header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

          flex-direction: column;
  overflow: hidden;
  list-style: none;
}

header ul li {
  font-family: 'IBMPlexMono';
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 28px;
}

header ul li a {
  display: block;
  margin-top: 16px;
  margin-bottom: 24px;
  margin-left: 16px;
  text-decoration: none;
}

.menu {
  clear: both;
  max-height: 0;

  transition: max-height .2s ease-out;
}

.menu-btn {
  display: none;
}

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

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

.menu-btn:checked ~ .menu-icon .nav-icon:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 0;
}

.menu-btn:checked ~ .menu-icon .nav-icon:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 0;
}

.menu-icon {
  position: relative;
  float: right;
  -
          user-select: none;
}

.menu-icon:hover {
  cursor: pointer;
}

.menu-icon .nav-icon {
  background-color: #000000;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  -webkit-transition: background .2s ease-out;
  transition: background .2s ease-out;
}

.menu-icon .nav-icon:before {
  background-color: #000000;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
   transition: all  .2s ease-out;
  position: absolute;
  top: 5px;
}

.menu-icon .nav-icon:after {
  background-color: #000000;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 5px;
  -webkit-transition: all  .2s ease-out;
  transition: all  .2s ease-out;
  top: -5px;
}```

Answer 1

Вам нужно использовать медиа-запрос для отзывчивости. Например, вы можете использовать:

@media(min-width:768px){
  // your code goes here
}

В этом случае, если размер экрана меньше 768 пикселей, будет применен код внутри этого медиа-блока. В случае, если вы хотите что-то вроде этого:

@media(min-width:768px){
  header ul{ display:none;}
}

Это не будет отображать ul, когда размер экрана меньше, чем 699px.