все мои пункты меню li закрыть меню не делать то, что они должны

Question

привет, я сделал эту боковую панель меню с помощью html и CSS, но у меня есть проблема в том, что мне нужна помощь, Li не реагирует, herf "#" просто удерживает места для реальных ссылок, первый li в первый ul не работает, когда я нажимаю на него, просто закрываю меню и herf # dont go вверх по странице, как будто все li просто закрывают меню, когда я нажимаю на них

body {
  height: 100vh;
}

.dvm {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: left;
  width: fit-content;
  margin: 10px;
  background-color: whitesmoke;
}

.dva1,
.dva2 {
  position: relative;
}

.dva1 ul,
.dva2 ul {
  background-color: burlywood;
  margin-left: 80px;
  margin-bottom: 250px;
  padding: 10px;
  width: 250px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: last baseline;
  flex-flow: row wrap;
  list-style: none;
  border-radius: 50px;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
  transform: translate(-10px);
}

.dva1 a,
.dva2 a {
  display: flex;
  align-items: left;
  justify-content: left baseline;
  color: maroon;
  text-decoration: none;
  padding: 5px;
  margin: auto;
}

.dva1 li,
.dva2 li {
  border: black solid 5px;
  margin: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  height: fit-content;
  width: fit-content;
  justify-content: center;
}

.dva1 li:hover,
.dva2 li:hover {
  background-color: wheat;
}

.dvm button {
  text-decoration: none;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  position: initial;
  margin: 5px;
  float: left;
}

.dvm button:hover {
  color: rgb(58, 112, 94);
}

.dva1 button:focus + ul,
.dva2 button:focus + ul {
  opacity: 1;
  pointer-events: all;
  transform: translateX(10px);
}

<nav>
  <div class="dvm">
    <button><a target="_blank" href="page.html">Home</a></button>
    <input type="text">
    <button><a target="_blank" href="page.html">Search</a></button>
    <button><a target="_blank" href="page.html">Sign up</a></button>
    <button><a target="_blank" href="page.html">Login</a></button>
    <button><a target="_blank" href="page.html">Home</a></button>
    <div class="dva1">
      <button>menu1</button>
      <ul>
        <li><a target="_blank" href="news.html">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="page.html">5</a></li>
      </ul>
    </div>
    <div class="dva2">
      <button>menu2</button>
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
      </ul>
    </div>
    <div class="dva2">
      <button>menu2</button>
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
      </ul>
    </div>
    <div class="dva2">
      <button>menu3</button>
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">5</a></li>
      </ul>
    </div>
      <div class="dva2">
        <button>menu4</button>
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
      <div class="dva2">
        <button>menu5</button>
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
  </div>
</nav>

Answer 1

Проблема в том, что эти пункты меню видны, и их можно щелкнуть, только когда данная кнопка находится в фокусе. Таким образом, если вы нажмете ссылку, кнопка потеряет фокус, и ul снова станет неработоспособным еще до перенаправления на страницу. Чтобы исправить это, вы можете добавить другой селектор в свой css:

.dva1 > ul a:focus, .dva2 > ul a:focus{
  opacity: 1;
  pointer-events: all;
}