html - 如何让下拉内容覆盖内容？

Question

我看不到下拉列表中的内容，因为它们上面有另一个内容(我有 iframe，它覆盖了下拉内容的数据)，我试图将 z-index 更改为更大的值并设置位置相对但它们都不起作用，下拉列表中的数据取自另一个文件:

#Menu-bar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:black;
  opacity: 0.7;
  filter:alpha (opacity=70);
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 200;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 200;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

#dropdownFollowing:hover .dropdown-content  {
  display: block;    
}

<div id="Menu-bar">
  <ul>
    <li>
      <a class="active"  href="MainPage.php">
        <img src="images/comp4.png" alt="">BIO
      </a>
    </li>
    <li>
      <a class="active" id="report-print"></a>
    </li>
    <li id="dropdownFollowing">
      <a class="dropbtn"></a>
      <div class="dropdown-content" id="contentFollow"></div>
    </li>
    <li id="dropdownFollowing">
      <a class="dropbtn"></a>
      <div class="dropdown-content" id="contentMessages"></div>
    </li>
    <li id="dropdownFollowing">
      <a class="dropbtn" id="notf"></a>
      <div class="dropdown-content" id="contentNotifications"></div>
    </li>
    <li style="float: right">
      <a href="logout.php" id="logoutt" class="active"><img src="images/logout.png" alt=""></a>
    </li>
  </ul>
</div>

Answer 1

我不确定你到底想做什么， 但对我来说，您似乎看不到下拉菜单的内容，因为其中没有内容。

https://jsfiddle.net/0jjdzhm9/

<div id="Menu-bar">
  <ul>
    <li>
      <a class="active"  href="MainPage.php">
        <img src="images/comp4.png" alt="">BIO
      </a>
    </li>
    <li>
      <a class="active" id="report-print"></a>
    </li>
    <li class="dropdownFollowing">
      <a class="dropbtn">test</a>
      <div class="dropdown-content" id="contentFollow">test</div>
    </li>
    <li class="dropdownFollowing">
      <a class="dropbtn">test</a>
      <div class="dropdown-content" id="contentMessages">test</div>
    </li>
    <li class="dropdownFollowing">
      <a class="dropbtn" id="notf">Test</a>
      <div class="dropdown-content" id="contentNotifications">Test</div>
    </li>
    <li style="float: right">
      <a href="logout.php" id="logoutt" class="active"><img src="images/logout.png" alt=""></a>
    </li>
  </ul>
</div>

#Menu-bar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:black;
  opacity: 0.7;
  filter:alpha (opacity=70);
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 200;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 200;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdownFollowing:hover .dropdown-content  { 
  display: block;    
}

还将 #dropdownFollowing 选择器更改为一个类 (.dropdownFollowing:hover)，因为您有多个选择器在使用它。