How to create a Hover Dropdown Menu? On click of item options, alert displays the item name!

Posted By: Kanika Gupta Published: 14, Jan 2024

How to create a Hover Dropdown Menu? On click of item options, alert displays the item name!




Ques - Create a dropdown menu "Actions". Which contains following items. 1. Add, 2. Update, 3. View, 4. Delete. On hover of "Actions" a dropdown will appear with the above options. On click of the options the item name will alert. 


The following code has an internal CSS using <style> element.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Q3</title>
<style>
    .dropdown-menu{
        display: inline-block;
    }
    .drop-button{
        border: none;
        padding: 12px 15px;
        font-weight: bolder;
        font-size: 20px;
        background: mediumpurple;
    }
    .drop-list{
        display: none;
        position: absolute;
        z-index: 1;
        border:1px solid white;
        box-shadow: 5px 5px 5px 5px #888888;
        padding: 5px 30px;
    }
    input[type=button]{
        padding:10px;
        display: block;
        text-decoration: none;
        color: black;
        background-color: white;
        border: none;
        font-size: 14px;
    }
    .dropdown-menu:hover .drop-list{
        display: block;
    }
    .drop-list .list-drp:hover{
        background-color: white;
    }
</style>
</head>
<body>
    <div class="dropdown-menu">
        <button class="drop-button">Actions</button>
        <div class="drop-list">
            <input type="button" id="Msg1" value="Add" onClick="myfunction(this.id)" />
            <input type="button" id="Msg2" value="Update" onClick="myfunction(this.id)" />
            <input type="button" id="Msg3" value="View" onClick="myfunction(this.id)" />
            <input type="button" id="Msg4" value="Delete" onClick="myfunction(this.id)" />
        </div>
    </div>
</body>
        <script type="text/javascript">
            function myfunction(btnId) {
                if (btnId == "Msg1") alert("ADD");
                else if (btnId == "Msg2") alert("UPDATE");
                else if (btnId == "Msg3") alert("VIEW");
                else if (btnId == "Msg4") alert("DELETE");
                else alert("Invalid ID!");
            }
        </script>
</html>


Output Screenshots:

DROPDOWN

ALERT


Categories


Recent Blog