How can I create a submenu in the MaterializeCSS drop-down list?

Question

I am trying to display a submenu inside a dropdown using the MaterializeCSS structure. I tried with the following code but that did not work.

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

Answer 1

I had the same problem. It turns out that it is as simple as embedding another dropdown link by setting the appropriate gutter and making sure that the dropdown-content overflow is set to visible .

Here is a link to the modified jsfiddle linked in the Nested Dropdowns in the materialized version

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> 

Answer 2

I tried this here, but mine was aligned one line from the drop down list, then did it, and it worked:

 .dropdown-content { overflow-y: visible; } .dropdown-content .dropdown-content { margin-left: 100%; }