https://jsfiddle.net/w25zne90/ 私はZ-indexで再生しました。しかし、私はドロップダウンをイメージの上に行くために上にぶら下がって取得するように見えることはできません。他のコンテンツの上に表示されないコンテンツをドロップします
私が試してみました：
ul li:hover ul li{
display: block;
background: rgba(0, 0, 0, 0.6);
color:white;
z-index:2;
}
を親要素を含むに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>z-indexプロパティがデフォルト位置の値である、position: staticでは動作しません、
はmenu-oute rとulにposition: relativeを設定し、あなたは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;
}
You have to set position 'relative' with z-index and set drop down absolute position. Updated css is below:
#menu-outer {
height: 41px;
background: rgba(0, 0, 0, 0.6);
margin-bottom:10px;
border:2px solid black;
z-index: 1;
position:relative; /*Set this property*/
}
.header{
display: table;
margin: 0 auto;
padding-top:1px;
}
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;
}
/*Add this code also*/
.header ul li ul{
position:absolute;
top: 43px;
}
.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;
}
Modified fiddle code link is below.