Как исправить выпадающие не работающие условия

Question

Я пытаюсь создать вертикальное раскрывающееся меню, используя HTML и CSS, но мой раскрывающийся список не работает.Я хотел бы знать, где я иду не так.Я перепробовал все, но я просто не понимаю, где я иду не так

#sidenav {
  margin-top: 2.5rem;
  display: none;
  flex-direction: column;
  width: 200px;
  height: 100%;
  max-width: 200px;
  box-sizing: border-box;
  background: #454545;
  font-size: 18px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
}

#sidenav input,
#sidenav li,
#sidenav {
  box-sizing: border-box;
}

.dropdown-bt {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown-bt:hover .dropdown-content {
  display: block;
}

<section id='sidenav'>
  <input type="text" placeholder="search..." id='mysearch' onkeyup="filterSearch()">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="dropdown-bt"><a href="#">Dropdown</a>
    <div class="dropdown-content" style="display:none;">
      <li><a href="#">-test 1</a></li>
      <li><a href="#">-test 2</a></li>
      <li><a href="#">-test 3</a></li>
      <li><a href="#">-test 4</a></li>
      <li><a href="#">-test 5</a></li>
      <li><a href="#">-test 6</a></li>
    </div>
  </li>
  <li><a href="#">Item 7</a></li>

</section>

Answer 1

Для первого сделайте .dropdown-content как неупорядоченный список, а не div.Удалите style="display:none;" для выпадающего списка, вы уже скрываете его через класс CSS .dropdown-content.Затем сделайте элемент списка position: relative; для размещения в выпадающем меню.

.dropdown-content li {   
   position: relative; 
}

И вам не нужна ссылка для выпадающего списка здесь.

   <li class="dropdown-bt">Dropdown
            <ul class="dropdown-content">
                <li><a href="#">-test 1</a></li>
                <li><a href="#">-test 2</a></li>
                <li><a href="#">-test 3</a></li>
                <li><a href="#">-test 4</a></li>
                <li><a href="#">-test 5</a></li>
                <li><a href="#">-test 6</a></li>
            </ul>
        </li>