Z-Index 不适用于下拉导航栏

Question

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

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

我不确定是什么原因造成的，因为我曾尝试乱用 css 中的 z-index 和位置，但无法使其正常工作，这将是一个很大的帮助如果有人能找出为什么这不起作用？我将post下面的相关代码。

谢谢
P.S。我在多个浏览器中都试过了，这个问题仍然存在。

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

它按原样工作得很好 - 尽管在白色背景上，您一开始的字体是白色的，所以您看不到它。

这是一个 link 的工作版本。

http://codepen.io/hoonin_hooligan/pen/PpqxBL

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

Answer 2

这是我的修订版，我在菜单内容上设置了蓝色背景以便正确查看。 DOM html 中没有名为 div1 的元素。我把#navdiv 放在 zIndx 的顶部，因为它是导航的容器。

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>

Answer 3

问题不在于 z-index，请尝试在您的悬停下拉菜单上使用其他颜色，如下代码：

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

Z-Index 不适用于下拉导航栏

Z-Index not working for drop down navbar

html

javascript

css

z-index

navigationbar