Create a dropdown box that appears when the user moves the mouse over an element.

navigation bar: This tag is used to start making a form

label: This tag is used to define a label for form element

input: This tag is used to get input data from the form

button: This tag is used to create a button which can be click to perform some action

select: This tag is used to create a drop-down selectable list

textarea: This tag is used to create a bigger text input field to take input from users

fieldset: This tag is used to group simillar type of fields

legend: This tag is used to caption the fieldset element

datalist: It is used to specify pre-defined list options for input control

output: This tag is used to display the output of the performed operation

option: This tag is used to define options in the dropdown list.

Following is the hierarchy required for the tags:

form is created first inside the body to start making the form.
rest all options can be defined anywhere inside the form element except
- option needs to be present inside a tag where options are available

Code

                    
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Practical 12</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css">
        <style>
            body {
                margin: 0;
                height: 100vh;
                display: grid;
                place-items: center;
            }

            img {
                max-width: 100%;
                height: auto;
            }

            .op4 {
                opacity: 0.4;
            }

            .dropdown {
                position: absolute;
                display: inline-block;
                bottom: 30%;
                
            }

            .dropdown-button {
                cursor: pointer;
                padding: 20px;
                background-color: aqua;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
                z-index: 1;
            }

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

            .dropdown-content a:hover {
                background-color: #f1f1f1
            }

            .dropdown:hover .dropdown-content {
                display: block;
            }
        </style>
    </head>

    <body>

        <img
            src="https://www.alldesigncreative.com/wp-content/uploads/2021/04/smoke-smoke-green-screen-background-hd-video-1080p.jpg">
        <div class="dropdown">
            <div class="dropdown-button">Hover over me</div>
            <div class="dropdown-content">
                <a href="#">Option 1</a>
                <a href="#">Option 2</a>
                <a href="#">Option 3</a>
            </div>
        </div>
    </body>

</html>

Create a dropdown box that appears when the user moves the mouse over an element.

Following is the hierarchy required for the tags:

Code

Output

Practical 12