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

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>

标签： htmlcssnavigationweb-deploymentdropdown

Answer 1

首先制作.dropdown-content为无序列表，而不是 div。删除style="display:none;"下拉菜单，您已经通过 css class 隐藏它.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>