I am not able to create CSS Dropdown menu - html

Question

I was just trying to make a dropdown menu. But it is not working. What is the error?
.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>
Or instead of opacity I have tried two things.. (visibility:hidden and visibility: visible) or (display: none and display: block). Its still not working with these three trials

Answer 1

Usually you would want your dropdown list to be contained with the button it belongs to. So where you have a dropdown containing Academic, Infrastructure and Admission this would all want to be contained with the About Us button. Here is some code from w3schools...
HTML
<div class="dropdown">
<button class="dropbtn">Button1</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Button2</button>
<div class="dropdown-content">
Link4
Link5
Link6
</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;}