Materialize dropdown in nav is behind elements - html

Question

I know this type of questions has been asked, I went over them but could not solve my problem.
In my page where I am using materialize, I have a nav bar with a dropdown button but whenever i open it, it would be behind another element. I am attaching a image of it
I am attaching a image of it.
I have made a similar problem in fiddle,
https://jsfiddle.net/Illuminator0/pugy1j5b/10/
<ul id='dropdown1' class='dropdown-content'>
<li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div id="nav-wrapper">
<ul class=" brand-logo center">
<li>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
I would appreciate the help.

Answer 1

I used the above solution to solve the problem, here's a fiddle of it
CSS code
.dropdown-content {
overflow-y: auto;
position: relative;
z-index: 1000;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
position: relative;
z-index: 1000;
}
.nav-wrapper {
overflow-y: auto;
position: relative;
}
.card {
overflow: visible;
position: relative;
}
nav {
position: relative;
z-index: 9999;
}

Answer 2

here is the solution i just add "z-index-1" in .card class
.dropdown-content {
overflow-y: auto;
position: relative;
z-index: 1000;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
position: relative;
z-index: 1000;
}
.nav-wrapper {
overflow-y: auto;
position: relative;
}
.card {
overflow: visible;
position: relative;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<ul id='dropdown1' class='dropdown-content'>
<li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div id="nav-wrapper">
<ul class=" brand-logo center">
<li>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>

Answer 3

Looks like the major problem is that the div with an id of nav-wrapper should be a class. Your css looks for that class but there is none so never gets applied. Then in that class get rid of the overflow: auto and add z-index: 1000.
Here is the fiddle.
And a snippet...
.dropdown-content {
overflow-y: auto;
position: relative;
z-index: 1000;
}
.dropdown-content .dropdown-content {
margin-left: 100%;
position: relative;
z-index: 1000;
}
.nav-wrapper {
/*overflow-y: auto;*/
position: relative;
z-index: 1000;
}
.card {
overflow: visible;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<ul id='dropdown1' class='dropdown-content'>
<li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
<ul class=" brand-logo center">
<li>
<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>