我无法将鼠标悬停在下拉菜单上

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

我无法将鼠标悬停在下拉菜单上

I cannot hover the dropdown

html

css

hover

less

dropdown