https://jsfiddle.net/w25zne90/ 我玩过z-index：1;但是当我徘徊在图像顶部时，我似乎无法获得下拉。
我试过了：
ul li:hover ul li{
display: block;
background: rgba(0, 0, 0, 0.6);
color:white;
z-index:2;
}
答案 0 :(得分：0)
在包含父元素的上声明z-index属性。
.header {
display: table;
margin: 0 auto;
padding-top: 1px;
/* Additional */
z-index: 1;
position: relative; /* required */
}
注意：此外，元素必须定位才能使用z-index属性创建堆叠上下文。
代码段示范：
#menu-outer {
height: 41px;
background: rgba(0, 0, 0, 0.6);
margin-bottom: 10px;
border: 2px solid black;
z-index: 1;
}
.header {
display: table;
margin: 0 auto;
padding-top: 1px;
/* Additional */
z-index: 1;
position: relative; /* required */
}
body {
background: url("images/background.jpeg") no-repeat;
background-attachment: fixed;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: georgia;
font-size: 20px;
}
ul li {
float: left;
width: 250px;
height: 50px;
line-height: 40px;
text-align: center;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background: rgba(0, 0, 0, 1);
color: white;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
background: rgba(0, 0, 0, 0.6);
color: white;
}
ul li ul li:hover {
text-decoration: underline;
color: white;
}
.main {
height: 2000px;
width: 1400px;
background-color: white;
display: table;
margin: 0 auto;
margin-top: 80px;
padding-top: 30px;
padding-left: 30px;
}
.meme {
padding-bottom: 30%;
height: 0;
width: 30%;
margin: 1%;
float: left;
display: block;
}<body>
<div id="menu-outer">
<div class="header">
<ul>
<li><a href="index.html">Home</a></li>
<li><a>About</a>
<ul>
<li><a href="ourteaml.html">Our Team</a></li>
<li><a href="whatwedo.html">What we do</a></li>
<li><a href="wherewegetourmemes.html">Where We Get Our Memes</a></li>
<li><a href="adminmemes.html">Admin Memes</a></li>
</ul>
</li>
<li><a>Memes</a>
<ul>
<li><a href="https://www.instagram.com/my.memes.are.not.dank/">Instagram Memes</a></li>
<li><a href="https://www.facebook.com/CheekyMemesForCheekyTeens42069/?modal=composer¬if_id=1511316467247909¬if_t=aymt_make_page_post_tip&ref=notif">Facebook Memes</a></li>
<li><a href="memebank.html">Meme Bank</a></li>
</ul>
</li>
<li><a>News</a>
<ul>
<li><a href="howtomakememes.html">How To Make Memes</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
<li><a href="typesofmemes.html">Types Of Memes</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="memes">
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
<div class="meme">
<img src="https://placehold.it/400x400" height="400" width="400">
</div>
</div>
</div>
</body>
答案 1 :(得分：0)
z-index属性不能与position: static一起使用，这是默认的位置值，
将position: relative设置为menu-oute r和ul然后您可以设置z-index值
#menu-outer {
position: relative;
height: 41px;
background: rgba(0, 0, 0, 0.6);
margin-bottom:10px;
border:2px solid black;
z-index: 1;
}
.header{
display: table;
margin: 0 auto;
padding-top:1px;
}
body{
background: url("images/background.jpeg") no-repeat;
background-attachment: fixed;
}
ul{
position: relative;
margin: 0px;
padding: 0px;
list-style: none;
font-family: georgia;
font-size:20px;
z-index: 2;
}
<强> Working fiddle