Nested dropdowns in materialize

Question

Is it possible to make nested dropdowns in materialize? second dropdown should be on right side

<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
    <li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="right">Drop Me!</a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
    <li><a href="#!">second one</a></li>
    <li><a href="#!">second two</a></li>
    <li><a href="#!">second three</a></li>
</ul>

https://jsfiddle.net/m0sdcn6e/

Nesting like this doesnt work. Any ideas?

Thanks Albert M.

Answer 1

It's not the best solution, but that is what I got:

Just add this to your CSS file:

.dropdown-content {
   overflow-y: visible;
}

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

That is what I'm using to get the nested Dropdown from Materializecss framework, since they didn't implement it natively yet.

Example: https://jsfiddle.net/m0sdcn6e/15/

UPDATE:

Unfortunately, there's a problem with that method. By definition, the overflow (x or y) property controls what happens to the container when something exceeds it's size. The default value of overflow-y is auto, so if something exceeds the size of the dropdown, for example, it'll become scrollable.

Materializecss spawns the dropdown's contents inside it's parents by default, so if we don't turn the overflow-y visible, the nested dropdown will disappear. But with the method, while the nested dropdowns works pretty well, these dropdowns will become unscrollable.

What you can do to avoid the problem on non-nested dropdowns is rename the first class and use it only when you need to append a nested one.

.dropdown-content.nested {
   overflow-y: visible;
}

Example: https://jsfiddle.net/m0sdcn6e/16/