Я не могу навести выпадающий список - PullRequest
Новая
       15

Я не могу навести выпадающий список

0 голосов
/ 04 октября 2018

Иногда при наведении на кнопку выпадающий список не работает, но иногда он колеблется (перемещается вверх и вниз), как сумасшедший.

Я сделал это только с 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;
      }
    }
  }
}

Я правильно написал коды?Дайте мне знать в вашем разделе комментариев.

1 Ответ

0 голосов
/ 04 октября 2018

Вам нужно установить display:block для .dropdown-content, а не для .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;
      }
    }
  }
}
...