JavaScript Program to Show Popup Menu on Mouse over

JavaScript Program to Show Popup Menu on Mouse over

Write a JavaScript program to Show Popup Menu on Mouse over.



Source Code
<html>
<head>
    <title>Popup Menu</title>
    <style>
        .dropdown {
            position:relative;
            display:inline-block;
        }
        .dropbtn {
            background: green;
            color: white;
            padding: 10px;
            font-size: 16px;
            border: none;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 2);
            z-index: 1;
        }
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            transition: 0.8s;
        }
        .dropdown-content a:hover {background-color: gray;}
        .dropdown:hover .dropdown-content {display: block;}
        .dropdown:hover .dropbtn {background-color: blue;}
    </style>
</head>
<body>

<h2>Pop Up Menu Example</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
<button class="dropbtn">Departments</button>
<div class="dropdown-content">
<a href="">Computer Engineering</a>
<a href="">Electronics and Telecom Engineering</a>
<a href="">Electrical Engineering</a>
<a href="">Mechanical Engineering</a>
<a href="">Civil Engineering</a>
</div>
</div>

</body>

</html>
Output