Я пытаюсь установить раскрывающийся список, чтобы перекрывать другие элементы в материализации.
У меня проблема с последним элементом коллекции и его выпадающим списком.
Когда вы открываете раскрывающийся список, он помещается под другими элементами.
Как я могу вместо этого перекрыть его?
Вот демо jsfiddle:
https://jsfiddle.net/hgyj9r88/
<ul class="collection">
<li class="collection-item avatar">
<img src="images/yuna.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle">folder</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle green">insert_chart</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
<li class="collection-item avatar">
<i class="material-icons circle red">play_arrow</i>
<span class="title">Title</span>
<p>First Line <br>
Second Line
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
</p>
<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
