如何修复下拉菜单不工作的情况

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>