Hi everyone ! I'm trying to implement a nested Dropdown menu, and found a good example online, but for some reason I'm having a strange behavior :
As an example you can see a live demo here : https://jsfiddle.net/ThibaudMZN/nrqbs0mv/35/
Try commenting / uncommenting the HTML's style tags and see the difference
Any idea why this is happening would be greatly appreciated !
Thanks !
menu
button, or sometimes randomly
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example nested dropdown</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<style>
.container {
background: #eee;
border-radius: 8px;
}
.dropdown-content .dropdown-content {
left: -100%;
}
.dropdown-nested {
overflow-y: visible;
}
.dropdown-nested {
overflow-y: visible;
}
</style>
</head>
<body>
<div class="container">
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Menu</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li><a href="#!">uno</a></li>
<li><a class='dropdown-trigger sub' href='#' data-target='dropdown2'>uno</a></li>
<li><a href="#!">uno</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a class='dropdown-trigger sub' href="#" data-target="dropdown3">dos</a></li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(function ()
{
$('.dropdown-trigger').dropdown();
$('.sub').dropdown({
hover: true
}
);
});
</script>
</body>
</html>
== External: SassError: Invalid CSS after ".blue": expected selector, was ".#007bff"
== External: on line 14 of node_modules/materialize-css/sass/components/_color-classes.scss
== External: from line 5 of node_modules/materialize-css/sass/materialize.scss
== External: from line 9 of assets/stylesheets/_materialize_custom.scss
== External: from line 4 of /Users/vzelenko/work/Docker/rdadvisors/assets/stylesheets/index.scss
== External: >>
== External: ------^