How can I make the submenu in the MaterializeCSS dropdown? - html

Question

I am trying to have a submenu dropdown inside a dropdown, using MaterializeCSS framework. I tried with the following code, but it didn't work.
<!-- this the main dropdown -->
<ul id="MainDropDown" class="dropdown-content">
<li>Dropdown1<span class="right caret">►</span></li>
<li>Dropdown2<span class="right caret">►</span></li>
<li>Dropdown3<span class="right scaret">►</span></li>
</ul>
<ul id="drop1" class="dropdown-content">
<li>Create</li>
</ul>
<ul id="drop2" class="dropdown-content">
<li>Create</li>
<li>Update</li>
</ul>
<ul id="drop3" class="dropdown-content">
<li>Create</li>
</ul>

Answer 1

I was having the same issue myself.
Turns out it's as simple as nesting another dropdown link,
setting an appropriate gutter, and making sure the overflow of
dropdown-content is set to visible.
Here is a link to the modified jsfiddle linked in Nested dropdowns in materialize
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>two</li>
<li class="divider"></li>
<li>three</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>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

Answer 2

I tried it here but my was aligned on the same line from the dropdown, then did it and it worked:
.dropdown-content {
overflow-y: visible;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
}

Answer 3

Based on the answer from #LibanH and updated for version v1.0.0, you need some change.
constrain_width must be replaced by constrainWidth and gutter is no longer an option.
In order to display the nested dropdown at the good position, we need to get the height of the selected item in first dropdown and set position with CSS
$('.dropdown-button').dropdown({
onOpenStart: function() {
var selectedItem = $(this).find('.selected');
$('#dropdown2').css('top', selectedItem.outerHeight() + "px");
}
});
$('.dropdown-button2').dropdown({
constrainWidth: false //change
hover: true,
alignment: 'left'
}
);
and add some CSS
#dropdown2 {
position: absolute;
left: 100%;
}