Question

所以我尝试根据W3Schools HTML和CSS指南创建一个下拉菜单。

这是我的代码，

ul {
      position: absolute;
      top: 200px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.6);
      width: 100%;
    }
    li {
      float: left;
      font-family: TW Cen MT Regular;
      font-size: 156.25%;
      height: 70px;
      line-height: 70px;
      width: 12%;
    }
    li a, .dropbtn {
      display: block;
      color: white;
      text-align: center;
      text-decoration: none;
    }
    li a:hover, .dropdownmenu:hover .dropbtn {
      background: black;
    }
    li.dropdownmenu {
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: red;
      width: 12%;
    }
    .dropdown-content a {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    .dropdown-content a:hover {
      color: #00fff6;
    }
    .dropdownmenu:hover .dropdown-content {
      display: block;
    }

<ul>
        <li id="About"><a href="About.html">ABOUT</a></li>
        <li id="Ongoing"><a href="NOTSET.html">NOTSET</a></li>
        <li id="Completed" class="dropdownmenu">
          <a href="javascript:void(0)" class="dropbtn">COMPLETED</a>
          <div class="dropdown-content">
            <a href="The Crispy.html">"The Crispy"</a>
            <a href="New Project.html">New Project</a>
          </div>
        </li>
        <li id="BuildLog"><a href="BuildLog.html">BUILD LOGS</a></li>
        <li id="Contact"><a href="Contact.html">CONTACT</a></li>
      </ul>

它现在看起来像这样，问题就是你看到当我悬停时下拉内容无法正确显示。你可以看到完成部分底部的红色很少。

website

Answer 1

我们告诉很多人W3School不好学。这是最好的例子。您可以在Google找到许多优秀的摘要。

要解决您的问题，

从overflow: hidden样式

中删除ul

ul {
  position: absolute;
  top: 200px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden*/
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
}
li {
  float: left;
  font-family: TW Cen MT Regular;
  font-size: 156.25%;
  height: 70px;
  line-height: 70px;
  width: 12%;
}
li a, .dropbtn {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
}
li a:hover, .dropdownmenu:hover .dropbtn {
  background: black;
}
li.dropdownmenu {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  width: 12%;
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  color: #00fff6;
}
.dropdownmenu:hover .dropdown-content {
  display: block;
}

<ul>
    <li id="About"><a href="About.html">ABOUT</a></li>
    <li id="Ongoing"><a href="NOTSET.html">NOTSET</a></li>
    <li id="Completed" class="dropdownmenu">
      <a href="javascript:void(0)" class="dropbtn">COMPLETED</a>
      <div class="dropdown-content">
        <a href="The Crispy.html">"The Crispy"</a>
        <a href="New Project.html">New Project</a>
      </div>
    </li>
    <li id="BuildLog"><a href="BuildLog.html">BUILD LOGS</a></li>
    <li id="Contact"><a href="Contact.html">CONTACT</a></li>
  </ul>

Answer 2

只需删除ul css中隐藏的溢出，它就可以正常工作。

ul {
  position: absolute;
  top: 200px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden*/
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
}

下拉菜单无法正确显示

2 个答案: