Question

我无法在下拉列表中看到内容，因为其他内容已经超过了它们（我将iframe关闭并且它覆盖了下拉内容的数据），我试图将z-index更改为更大的值并将位置设置为相对，但它们都不起作用，下拉列表中的数据来自另一个文件：

＆＃13;

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

＆＃13;

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

＆＃13;

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），因为您有多个使用它。

如何让下拉内容获得内容？

1 个答案: