Не двигается меню при нажатии на navicon (кнопку бургер) при заданном position fixed, как исправить?

Question

[Артем Прохоров]

<nav class="nav">
              <div class="nav_btn"><a href="">&#9776;</a></div>

              <ul>
                <li><a href="">Hello</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">Team</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact</a></li>
              </ul>
            </nav>

Это не весь код, но остальной не нужен. Эт менюшка(шапка сверху) на флексах через jc-space-between.
Решил кнопку не расписывать, так как первый раз реализую подобное и мне, хочется понять хотя бы, как выдвинуть наконец это меню сбоку.

.nav {
  display: flex;
}

.menu a {
  font-size: 16px;
  color: #fff;
  padding: 5px 20px;

  border: 1px solid transparent;
}

.menu a:hover,
.menu a:checked {
  border: 1px solid #fff;
  border-radius: 30px;
}

.menu ul {
  display: flex;
  align-items: center;
}

.nav_check {
  opacity: 0;
}

.nav_btn {
  display: flex;
  align-items: center;

  width: 25px;
  height: 25px;

  cursor: pointer;
  z-index: 1;
}

.nav_btn a {
  font-size: 25px;
  color: #fff;
}

@media screen and (max-width: 1268px) {
  .header_inner {
    width: 95%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 868px) {
  .nav_btn {
    margin-right: 20px;
  }
  .nav_btn a:hover,
  .nav_btn a:checked {
    border: none;
    border-radius: none;
    border: 1px solid transparent;
  }
  .nav ul {
    display: block;
    width: 300px;
    align-items: center;

    position: fixed;
    right: -500px;
  }
  .nav_btn a:focus ul {
    right: 0;
  }
}

Делаю это для responsive. Извинити, может немного не красиво задал классы для ссылк между ul и дивом для навикона, но мозги ужи поплыли.
Или не работает :focus для ссылки(почему то), или :focus и :checked не действуют, если у обьекта при нажатии на элемент с фокусоф, или чеком есть position(absolute или fixed), или я от переработки не вижу маленькую ошибку, или я прост о думаю, что понимаю, но я вообще все с нуля не так сделал.

Answer 1

[Sagrana]

.nav_btn a:focus ul
ul не является дочерним к .nav_btn a:focus

Comments

[Артем Прохоров]

Спасибо, я видимо переработал, сейчас смотрю и смешно даже :D

Answer 2

[ildar-meyker]

Средний человек не в состоянии в уме воспроизвести ваш код. Ему нужно все подключить и посмотреть. Почему это должен сделать он, а не вы?