I am not able to create CSS Dropdown menu

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>

I've tried two things instead of opacity. (visibility:visible as well as visibility:hidden) (display: none and display: block). With these three trials, it is still not working.

Answer 1

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.