html – 如何在MaterialiseCSS下拉列表中创建子菜单？

我正在尝试使用MaterialiseCSS框架在下拉列表中有一个子菜单下拉列表.我尝试使用以下代码,但它没有用.

<!-- 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">&#9658;</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">&#9658;</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">&#9658;</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>

解决方法

我自己也有同样的问题.
事实证明它就像嵌套另一个下拉链接一样简单,
设置一个合适的排水沟,并确保溢出
dropdown-content设置为可见.

这是一个链接到Nested dropdowns in materialize中链接的修改过的jsfiddle

https://jsfiddle.net/fb0c6b5b/

$('.dropdown-button2').dropdown({
      inDuration: 300,outDuration: 225,constrain_width: false,// Does not change width of dropdown to that of the activator
      hover: true,// Activate on hover
      gutter: ($('.dropdown-content').width()*3)/2.5 + 5,// Spacing from edge
      belowOrigin: false,// displays dropdown below the button
      alignment: 'left' // displays dropdown with edge aligned to the left of button
    }
  );

.dropdown-content{
    overflow: visible !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
    <li><a class='dropdown-button2 d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
</ul>
<ul id='dropdown2' 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

原文地址：https://www.jb51.cc/html/232226.html