Question

我知道类似的问题已经被要求处理z索引不适用于下拉列表，但所有这些都不适用于我的情况，或者由于某种原因不适用。

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

我不确定是什么导致这种情况，因为我已经尝试弄乱了z-index和css中的位置而无法让它工作，如果有人能找到原因，这将是一个很大的帮助这不行吗？我将在下面发布相关代码。

感谢
附：我已经在多个浏览器中尝试过这个问题。

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

它的工作原理很好 - 虽然在白色背景上你的字体是白色的，所以你看不到它。

以下是工作版本的链接。

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的顶部，因为它是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>

Answer 3

问题不在于z-index，请尝试使用其他颜色悬停下拉列表，如下代码：

    multipart.addBodyPart(messageBodyPart);

Z-Index无法用于下拉导航栏

3 个答案: