我无法创建 CSS 下拉菜单

Question

我只是想制作一个下拉菜单。 但它不起作用。 错误是什么？

 .dropdown1{ width: 200px; height: 110px; background-color: white; border: 5px solid black; position:absolute; left: 400px; opacity: 0; } .about_us1:hover .dropdown1{ opacity: 1; }

 <div class="header"> <strong> <h3 style="position: relative;top: 2px;left: 200px;font-weight: 1000;font-size: 30px;">HOME</h3></strong> <strong> <h3 class="about_us1" style="position: relative;top: -30px;left: 400px;font-weight: 1000;font-size: 30px;">ABOUT US</h3></strong> <center> <div class="dropdown1"> <h3>Our Motto</h3> <br> <h3>Admission</h3> <br> <h3>Principal's Desk</h3> </div> </center> <strong> <h3 style="position: relative;top: -65px;left: 700px;font-weight: 1000;font-size: 30px;">ACADEMIC</h3></strong> <strong> <h3 style="position: relative;top: -100px;left: 1000px;font-weight: 1000;font-size: 30px;">INFRASTRUCTURE</h3></strong> <strong> <h3 style="position: relative;top: -135px;left: 1450px;font-weight: 1000;font-size: 30px;">ADMISSION</h3></strong> </div>

或者代替不透明度我尝试了两件事..（可见性：隐藏和可见性：可见）或（显示：无和显示：块）。 它仍然无法与这三个试验一起使用

Answer 1

通常，您希望下拉列表包含在它所属的按钮中。 因此，如果您有一个包含学术、基础设施和入学的下拉菜单，这些都希望包含在“关于我们”按钮中。 这是来自 w3schools 的一些代码...

HTML

<div class="dropdown">
  <button class="dropbtn">Button1</button>
  <div class="dropdown-content">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">Button2</button>
  <div class="dropdown-content">
    <a href="#">Link4</a>
    <a href="#">Link5</a>
    <a href="#">Link6</a>
  </div>
</div>

CSS

 /* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}