Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Materialize nested dropdown/menu -
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example nested dropdown</title>
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
.right-triangle {
float: right;
.dropdown-nested {
overflow-y: visible;
.dropdown-content .dropdown-content {
margin-left: 100%;
.container {
background: #eee;
padding: 200px 100px;
border-radius: 8px;
<div class="container">
<div class="row">
<div class="col s12">
<h3>Example nested dropdown</h3>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Nested DropDown</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li><a class='dropdown-button' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">&#9656;</span></a></li>
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li><a href="#!">one</a></li>
<li><a class='dropdown-button' href="#" data-activates="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">&#9656;</span></a></li>
<li><a href="#!">three</a></li>
<ul id='dropdown3' class='dropdown-content'>
<li><a href="#!">three</a></li>
<li><a href="#!">four</a></li>
<li><a href="#!">five</a></li>
<li><a href="#!">six</a></li>

This comment has been minimized.

Copy link

@ueredeveloper ueredeveloper commented Mar 2, 2020

Hi. Thanks a lot. But don't work in phone browsers. Do you have one idea how to get it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment