How can I make the submenu in the MaterializeCSS dropdown?

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

Villon

if someone is following this i got this reference #32739099 – Villon

Is it working now?? – Beaune

No didnt get any reference so i left looking into it – Villon

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

Resor

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%;
}

Policyholder

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%;
}

Ocieock