时间戳

首页 > 解决方案 > 我无法创建 CSS 下拉菜单

html - 我无法创建 CSS 下拉菜单

问题描述

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

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

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

标签： htmlcssdrop-down-menuopacity

解决方案

通常你会希望你的下拉列表包含在它所属的按钮中。因此，如果您有一个包含学术、基础设施和入学的下拉菜单，则所有这些都希望包含在“关于我们”按钮中。这是来自 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;}

推荐阅读