下拉内容不显示在其他内容之上答案

【问题标题】：Drop down content not showing over top of other content下拉内容不显示在其他内容之上
【发布时间】：2018-05-07 02:27:30
【问题描述】：

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

【问题讨论】：

标签： html css z-index

【解决方案1】：

 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.

https://jsfiddle.net/39ux9Lmz/

【讨论】：

【解决方案2】：

z-index 属性不适用于position: static，这是默认位置值，

将position: relative设置为menu-outer和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

【讨论】：

【解决方案3】：

在包含的父元素上声明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&notif_id=1511316467247909&notif_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>

Updated JSFiddle

【讨论】：