Z-Index不適用於下拉式導航欄

我知道類似的問題已經被要求做與z索引不起作用的下拉菜單，但所有這些都沒有爲我的情況工作，或不適用的原因之一或其他。Z-Index不適用於下拉式導航欄

無論如何，我有一個問題，無論何時我將鼠標懸停在主塊上以觸發下拉菜單，當它出現在它後面的div後面時。（不知道它是否重要，但是當我將鼠標懸停在下拉列表中的某個選項上時，它會根據它應該在盤旋時的顏色進行更改，然後它會像最初應該那樣跳到div的前面）。

我不確定是什麼導致了這一點，因爲我曾嘗試搞亂z-index和css中的位置，只是無法讓它正常工作，如果有人能夠發現它會是一個很大的幫助爲什麼這不起作用？我將在下面發佈相關代碼。

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

來源

2017-02-27 CCourse

這裏是我的版本，我把一個藍色的背景看到了菜單的內容是正確的。 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>

來源

2017-02-27 18:45:26

它的工作只是罰款，是 - 你的字體斷一開始走的白色背景上的白色，雖然，所以你看不到它。

這是一個工作版本的鏈接。

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

來源

2017-02-27 18:45:01 HisPowerLevelIsOver9000

的問題是不是z-index的，嘗試用其它顏色的鼠標懸停下拉列表這樣的代碼：

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

來源

2017-02-27 18:53:19

Z-Index不適用於下拉式導航欄

回答

相關問題