我尝试有一个下拉菜单内的下拉菜单,使用物化CSS框架。我尝试了以下代码,但它没有工作。
<!-- this the main dropdown -->
<ul id="MainDropDown" class="dropdown-content">
<li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop1">Dropdown1<span class="right caret">►</span></a></li>
<li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop2">Dropdown2<span class="right caret">►</span></a></li>
<li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop3">Dropdown3<span class="right scaret">►</span></a></li>
</ul>
<ul id="drop1" class="dropdown-content">
<li><a href="#">Create</a></li>
</ul>
<ul id="drop2" class="dropdown-content">
<li><a href="#">Create</a></li>
<li><a href="#">Update</a></li>
</ul>
<ul id="drop3" class="dropdown-content">
<li><a href="#">Create</a></li>
</ul>
3条答案
按热度按时间bogh5gae1#
我自己也遇到过同样的问题,结果发现这很简单,只要嵌套另一个下拉链接,设置一个合适的排水沟,并确保 dropdown-content 的溢出设置为visible。
下面是Nested dropdowns in materialize中修改后的jsfidle的链接
https://jsfiddle.net/fb0c6b5b/
2wnc66cl2#
我在这里试过,但我的是从下拉列表中对齐在同一行,然后做了它,它的工作:
u2nhd7ah3#
根据来自@LibanH的答案并针对v1.0.0版本进行了更新,您需要进行一些更改。
constrain_width
必须替换为constrainWidth
,并且gutter
不再是一个选项。为了在合适的位置显示嵌套的下拉菜单,我们需要获取第一个下拉菜单中选定项的高度,并使用CSS设置位置
加一些CSS