我无法悬停下拉菜单

Question

有时当我悬停按钮时，下拉菜单不起作用，但有时它会疯狂地摇晃（上下移动）。

我只用 LESS 制作了这个，这是我的下拉 HTML 按钮

<b>Hello, <a href="{{$session->role=='admin'?'/back_office':'#'}}">{{$session->name}}</a></b>
    <span class="dropdown-title">
      <button class="dropbtn"><i class="fa fa-caret-down"></i></button>
      <div class="dropdown-content">
        <a href="/history">Payment Ticket History</a>
        <a href="/ticket">Payment Ticket</a>
      </div>
    </span>

这是LESS文件中的代码：

.dropdown-title {
  position: relative;
  display: inline-block;
  .dropbtn {
    &:hover {
      display: block;
    }
    background-color: transparent;
    border: none;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 2em;
    z-index: 1;
    a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      &:hover {
        background-color: #ced6e0;
      }
    }
  }
}

我写错代码了吗？请在您的评论部分告诉我。

Answer 1

你需要为.dropdown-content设置display:block而不是.dropbtn

.dropdown-title {
  position: relative;
  display: inline-block;

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

  .dropbtn {
    background-color: transparent;
    border: none;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 2em;
    z-index: 1;
    a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      &:hover {
        background-color: #ced6e0;
      }
    }
  }
}