How to create dropdown list using JavaScript ?

02 May, 2022
The dropdown list menu is very helpful for the users when they visit any website. It makes a better experience for the user to use all kinds of services provided by the website without any hassle. In this article, we are going to create a dropdown list using HTML, CSS, and the most important JavaScript.
The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences.
Approach: In this article, we will create two dropdown lists, the first one will be a clickable dropdown list, which means that you have to click on that to see the rest of the sub-items, and the other one will be a hoverable dropdown list, you just have to hover your mouse over it and it will show the rest of the sub-element from which user can select one of them.
Example: In this dropdown list, the user will have to click on the button to open the dropdown list.
HTML
<!DOCTYPE html><html lang="en"> <head>    <title>Dropdown list using javascript</title>     <style>        body {            margin: 0;            padding: 0;            background: #333333;            display: flex;            align-items: center;            justify-content: center;            margin-top: 30px;        }         .main {            height: 400px;            padding: 10px;        }         .dropdown_button {            background-color: #0979ad;            color: white;            padding: 16px;            font-size: 16px;            border: none;            cursor: pointer;            width: 200px;            font-family: montserrat;            border: 1px solid #ffffff;        }         .courses {            display: none;            position: absolute;            background-color: #f1f1f1;            min-width: 200px;            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);            z-index: 1;        }         .courses li {            color: black;            padding: 12px 16px;            text-decoration: none;            display: block;            list-style: none;            background-color: rgb(47, 47, 47);            font-family: montserrat;            border: 1px solid white;        }         .courses li a {            text-decoration: none;            color: white;            display: block;            padding: 10px;        }         .courses li:hover {            background-color: #0979ad;            color: white;        }    </style></head> <body>    <div class="main">        <div class="dropdown_list">            <button class="dropdown_button"                onclick="show_list()">                Select course            </button>             <div id="courses_id" class="courses">                <li><a href="">Machine learning</a></li>                <li><a href="">Data science</a></li>                <li><a href="">Data analysis</a></li>                <li><a href="">Data mining</a></li>                <li><a href="">Data warehousing</a></li>            </div>        </div>    </div>     <script>        function show_list() {            var courses = document.getElementById("courses_id");             if (courses.style.display == "block") {                courses.style.display = "none";            } else {                courses.style.display = "block";            }        }        window.onclick = function (event) {            if (!event.target.matches('.dropdown_button')) {                document.getElementById('courses_id')                    .style.display = "none";            }        }       </script></body> </html>
Output:
sweetyty
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Methods
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.