How can I make the submenu in the MaterializeCSS dropdown?

user_4823380 0
Viewed 14388

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>
submenu materialize dropdown css html
2 Answers

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

user_70327100
Related