Javascript Z索引不适用于下拉导航栏

我知道有人问过类似的问题，关于z索引不适用于下拉列表，但所有这些问题要么不适用于我的情况，要么由于某种原因不适用

无论如何，我有一个问题，每当我悬停在主块上触发下拉菜单时，它就会出现在我前面的div后面。（不确定这是否重要，但当我将鼠标悬停在下拉列表中的某个选项上时，它会像悬停在上面时一样改变颜色，然后像最初一样跳到div前面）

我不确定是什么原因导致了这一点，因为我尝试过在css中混淆z索引和位置，但无法使其工作，如果有人能找出这一点不起作用的原因，这将是一个很大的帮助？我将在下面发布相关代码

谢谢
另外，我在多个浏览器中进行了尝试，但问题仍然存在

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>

---

它的工作就像现在一样好-你的字体是白色的，虽然背景是白色的，所以你看不到它

这里是一个链接到一个工作版本

---

这是我的修订版，我把蓝色的背景放在菜单的上方。 DOM html中没有名为div1的元素。 我把#navdiv放在zIndx的顶部，因为它是nav的容器

CSS:

HTML:

占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符

问题不在于z索引，请在悬停下拉列表中使用其他颜色，如以下代码：

.dropdown:hover .dropdown-content {
    display: block;
    background: blue;
}

.dropdown-content a {
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
  z-index: 1;
}

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

<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>

.dropdown:hover .dropdown-content {
    display: block;
    background: blue;
}