Z-Index not working for drop down navbar

Question

I know similar questions have been asked to do with the z index not working for a dropdown, but all of these have either not worked for my case, or were not applicable for one reason or another.

Anyway, I have an issue that whenever I hover over the main block to trigger the dropdown menu, when it does it appears behind the div that I have in front of it. (Not sure if it matters, but when I hover over an option on the dropdown, it changes colour as it is supposed to do when hovered over and it then jumps in front of the div like it was supposed to do initially).

I am not sure what is causing this as I have tried messing around with the z-index and positions in the css and just can't get it to work, and it would be a great help if someone could find out why this isn't working? I will post the relevant code below.

Thanks
P.S. I have tried in multiple browsers and this problem persists.

HTML:

<nav id="navdiv">
<ul class="navlinks">
   <li><a class="active" href="portfolio.html">Home</a></li>
   <li><a class="About Me" href="about.html">About me</a></li>
   <li class="dropdown"><a href="javascript:void(0)" class="dropbutton">Programming</a>
    <div class="dropdown-content">
    <a href="pythonprograms.html">Python Programs</a>
    <a href="androidprograms.html">Android Programs</a>
    <a href="otherprograms.html">Other Programs</a>
    </div>
    </li>
   <li><a class="contact" href="contact.html">Contact Me</a></li>
   <li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>

<div1>
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div1>

css:

#navdiv {
    border: 0;
    background-color: #202020;
    border-radius: 0px;
    margin-bottom: 0;
    height: 30px;
}

.navlinks {
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    display: inline;
}

li a, .dropbutton {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.active {
    background-color: #4CAF50;
}

li a:hover, .dropdown:hover .dropbutton {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #30313;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    position: relative;
    z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: red;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

div1 {
    color: white;
    font-family: "Times New Roman", Times, Sans-Serif;
    text-size: 16px;
    z-index: -1;
    width: 100%;
    top: 0;
    position: relative;
    height: 200px;
}

Answer 1

here is my revision, i put a blue background for seen correct over menu to content. And there is no element called div1 in DOM html. i put #navdiv at top of zIndx, because is container of nav.

https://jsfiddle.net/exxe4ksc/

CSS:

#navdiv {
    border: 0;
    background-color: #202020;
    border-radius: 0px;
    margin-bottom: 0;
    height: 30px;
    position:relative;
    z-index:100;
}

.navlinks {
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #999;
}

li {
    display: inline;
}

li a, .dropbutton {
    display: inline-block;
    color: white;
    background:#440099;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.active {
    background-color: #4CAF50;
}

li a:hover, .dropdown:hover .dropbutton {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #30313;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    position: relative;
    z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: red;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

div#content {
    color: white;
    font-family: "Times New Roman", Times, Sans-Serif;
    text-size: 16px;
    z-index: 1;
    width: 100%;
    top: 0;
    position: relative;
    height: 200px;
}

HTML:

<nav id="navdiv">
<ul class="navlinks">
   <li><a class="active" href="portfolio.html">Home</a></li>
   <li><a class="About Me" href="about.html">About me</a></li>
   <li class="dropdown"><a href="javascript:void(0)" class="dropbutton">Programming</a>
    <div class="dropdown-content">
    <a href="pythonprograms.html">Python Programs</a>
    <a href="androidprograms.html">Android Programs</a>
    <a href="otherprograms.html">Other Programs</a>
    </div>
    </li>
   <li><a class="contact" href="contact.html">Contact Me</a></li>
   <li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>

<div id ="content">
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div>