Question

我正在尝试设置下拉列表以重叠物化中的其他元素。

我遇到的问题是最后一个收集项及其下拉列表。

当您打开下拉菜单时，它会被放置在其他元素的下方。

我怎样才能重叠呢？

这是demo jsfiddle：

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

Answer 1

如果您将.tt-menu { min-width:200px; max-width:100%; padding:10px 0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#fff; -webkit-box-shadow:0 2px 5px rgba(0,0,0,.35); -moz-box-shadow:0 2px 5px rgba(0,0,0,.35); box-shadow:0 2px 5px rgba(0,0,0,.35) } .materialize-tags .tt-menu .tt-suggestion { line-height:1.1rem !important; padding:2px 10px !important } .materialize-tags .tt-menu .tt-cursor { background:#03a9f4;color:#fff }设置为.collection您将看到下拉列表，则overflow: hidden;班级为overflow: visible;。这是jsfiddle工作https://jsfiddle.net/hgyj9r88/2/

如何设置下拉列表与实体化中的其他元素重叠

1 个答案: