Как сделать так, чтобы выпадающее меню показывалось за пределами карты в Materialise

У меня есть карточка Materialize с выпадающим меню в правом верхнем углу. Однако при нажатии кнопки раскрывающегося списка меню отображается, но содержимое меню не выходит за границы карточки:

<ul id='myDropdown-menu' class='dropdown-content'>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
</ul>

<div class="card white">
  <div class="card-content grey-text text-darken-4">
    <span class="card-title grey-text text-darken-4">Card Title</span>
      <a id="myDropdown" class='btn-floating waves-effect waves-light transparent right' href='#' data-activates='myDropdown-menu'><i class="material-icons blue-grey-text text-darken-4">more_vert</i></a>
  </div>
</div>

Как сделать так, чтобы выпадающее меню выходило за границы карточки?

http://jsfiddle.net/6sjLbrht/


drop-down-menu materialize
person Luke    schedule 10.07.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Похоже, что в классе .card есть overflow: hidden, который не позволяет меню появляться за пределами карты. Добавив следующий стиль в свою собственную таблицу стилей, вы можете преодолеть это.

.card {
    overflow: visible !important;
}

Я обновил JSFiddle, чтобы проиллюстрировать исправление:

http://jsfiddle.net/6sjLbrht/1/

person Luke    schedule 11.07.2015