Question

我希望只要将鼠标悬停在 About 按钮上，就会看到一个下拉菜单，但是当我这样做时，我只能看到它的一半。我的代码中我做错了什么？

代码：

.dropdown {
  position: relative;
  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);
}
body {
  background-color: #1A1617
}
ul {
  text-align: center;
  list-style-type: 0px;
  margin: 0px;
  padding: 20px;
  background-color: black;
  overflow: hidden;
}
li a {
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}
li {
  display: inline;
}
li a:hover {
  background-color: red;
  text-size: 10px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html>
<body>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="news.html">News</a></li>
    <div class="dropdown">
      <li><a href="about.html">About</a></li>
      <div class="dropdown-content"><p>Check</p></div>
    </div>
  </ul>
</body>
</html>

Answer 1

<强>问题：

您在 overflow: hidden 元素中使用 ul ，该元素不允许其子（ {{ 1}} ， li ）超过其父级 div 和 width ，这就是您的下拉菜单被删除的原因。

更正后的代码：

height

.dropdown {
  position: relative;
  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);
}
body {
  background-color: #1A1617
}
ul {
  text-align: center;
  list-style-type: 0px;
  margin: 0px;
  padding: 20px;
  background-color: black;
  /*overflow: hidden; ← REMOVE THAT */
}
li a {
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}
li {
  display: inline;
}
li a:hover {
  background-color: red;
  text-size: 10px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

Answer 2

我几乎完全从头开始重做这件事;与推荐的网页设计标准相关的一些问题本来没有介绍，我希望你今天可以从我的工作中学习：

实际问题与在.dropdown类中设置相对元素有关。

在我创建的HTML5代码中：

＆＃13;

<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="UTF-8">
<title>Red And Black Navigation Bar</title>
<style>
body {
  background-color: #1A1617;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  min-width: 320px;
}

ul {
 text-align: center;
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: black;
 border: 1px solid white;
}

li {
  display: inline;
}

li a, .dropbtn {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 20px 16px;
 text-decoration: none;
 font-size: large;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: center;
}

.dropdown:hover .dropdown-content {
  display: block;
  padding: 5px;
}

.goCenter {
  text-align: center;
  color: white;
  font-weight: bold;
}
</style>
</head>
<body>

<ul>
  <li><a class="achome.html">Home</a></li>
  <li><a href="news.html">News</a></li>
  <li class="dropdown">
    <a href="about.html" class="dropbtn">About</a>
    <div class="dropdown-content">
      <p>The About Goes Here...</p>
    </div>
  </li>
</ul>

<p class="goCenter"></p>

</body>
</html>

＆＃13;

带有HTML和CSS的简单下拉菜单

2 个答案: