L'index Z ne fonctionne pas pour la barre de navigation déroulante

Question

Je sais que des questions similaires ont été posées pour l'index z ne fonctionnant pas pour une liste déroulante, mais toutes n'ont pas fonctionné pour mon cas, ou n'étaient pas applicables pour une raison ou un autre.

Quoi qu'il en soit, j'ai un problème qui chaque fois que je survole le bloc principal pour déclencher le menu déroulant, quand il le fait, il apparaît derrière le div que j'ai devant lui. (Je ne sais pas si c'est important, mais quand je passe la souris sur une option dans la liste déroulante, elle change de couleur comme elle est supposée faire quand elle survole et elle saute alors devant la div comme elle était censée faire initialement). Je ne suis pas sûr de ce qui cause cela car j'ai essayé de déconner avec l'index z et les positions dans le css et ne peux tout simplement pas le faire fonctionner, et ce serait une aide précieuse si quelqu'un pouvait trouver pourquoi cela ne fonctionne pas? Je vais poster le code correspondant ci-dessous.

Merci
P.S. J'ai essayé dans plusieurs navigateurs et ce problème persiste.

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

voici ma révision, mettre un fond bleu pour voir correct sur le menu au contenu. Et il n'y a aucun élément appelé div1 dans DOM html. Je mets #navdiv en haut de zIndx, parce que c'est un conteneur de 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 2

Il fonctionne très bien comme cela est - vous êtes police au large de la go get est blanc mais sur fond blanc afin que vous ne voyez pas .

Voici un lien vers une version de travail.

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 3

Le problème n'est pas le z-index, essayez avec d'autres couleurs sur vous placez le curseur dropdown comme ce code:

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