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

您需要将display:block的{{1}}设置为.dropdown-content的

.dropbtn

我无法将下拉列表悬停

1 个答案: