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>

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

1 个答案: