我无法悬停下拉列表

有时当我悬停按钮时,下拉菜单不起作用,但有时它会像疯了一样抖动(上下移动)。

<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;
      }
    }
  }
}