How to Create a Clickable Dropdown Menu with CSS and JavaScript
Dropdown Menu
How To, for Web Applications
By: Chrysanthus Date Published: 12 Apr 2025
When a button is clicked, and a menu appears below the button, covering content that is below the button, then that is a dropdown menu. This tutorial explains how to Create a clickable dropdown Menu using CSS and JavaScript. The menu consists of hyperlinks placed vertically. When the mouse is clicked on the button again, or outside of the button, the menu disappears.
At the end of this tutorial, is the complete webpage code. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Click the button to see the dropdown menu. Click on the button again, or click outside the button, for the menu to disappear. The reader is advised to do that before continuing to read the rest of this tutorial.
The Webpage Code Skeleton
The skeleton code for the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Clickable Dropdown</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage should have at least the first four tags in the HTML head element above. The style element will have quite a good amount of code, for presentation of important elements in the HTML body. There will be JavaScript code to respond to the clicking of the button, or clicking the button again, or clicking outside the button. The menu container is a div element. The button element will be typed above the div element. Both the button and menu div are inside another div element. All that content will be inside the HTML body element; not shown in the skeleton code above.
The Content of the HTML body Element
The content of the body element is:
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<p>Some content, some content, some content, some content, some content - - -</p>
There is an outer div element with class-name, "dropdown". The first element inside this outer div element is the button element with class-name, "dropbtn". The second element inside this outer div is an inner div. This inner div is the container for the menu to be popped-out (appear) and made disappear. The class-name for this menu container div is "dropdown-content". This inner menu div has the hyperlinks, which are the menu items. Remember that the code for the hyperlink is the anchor (a) element. The inner menu div has the ID, "myDropdown".
When the button is clicked, the function, myFunction() in JavaScript is called. This function will drop-down the inner menu div, to cover (be in front of) content below the button. If the button is clicked again, or the mouse is clicked outside the button, the dropdown menu will disappear (go off).
Strategy
While the menu div is not shown, its CSS display property is none; but while it is shown, its CSS display property is block. Since the menu div has to be shown in front of (cover) some elements in the body element, it needs to have the absolute CSS position property, with a CSS z-index of 1; assuming that the body element and the rest of its content have a z-index value of 0. For any element to have an absolute property, its parent element (container) should have a position property. In this case the parent container, which is the outer div, will have the relative position property.
The Style Element Content
All the styling is within the start and end tags of the HTML style element.
Styling the Outer div
The outer div has the button and the inner menu div. The CSS rule for the outer div is:
div.dropdown {
position: relative;
display: inline-block;
}
Since the inner menu div will have the absolute position property, the parent outer div needs to have a position property. In this case, it is the relative position property, which will not really disturb the intended design.
Normally, the div element will take the whole width of its parent container. The parent container of this outer div is the body element. In order for the outer div to take a smaller width, which is just the width of its internal content, it (the outer div) is given the display value of inline-block. In this way, content (text) can be coded on the right of (outside) the outer div. The content inside the outer div are the button and the inner menu div. The width of the button is about 100px and the width of the inner menu div is 160px.
For this project, there are only three anchor elements, placed vertically, in the inner menu div. So both the height and the width of the assembly are small, enabling it (the assembly) to fit into a smartphone screen (as well as into a wide screen).
Styling the button
The CSS rule for the button is:
div.dropdown .dropbtn {
cursor: pointer;
border: none;
background-color: #3498DB;
color: white;
font-size: 16px;
padding: 16px;
}
The "cursor: pointer;" property is there, so that, when the mouse pointer goes over the button, it should become a hand. It is fashionable to have it like that today.
There is no border. The background color is #3498DB (bluish). The text color is white. The four padding is 16px. The text font-size is 16px. The button is always displayed, whether the inner menu div is popped out or not.
Button On-hover and Focused
The CSS rule for the button on-hover is:
button.dropbtn:hover, button.dropbtn:focus {
background-color: #2980B9;
}
When the mouse pointer goes over the button, its background color becomes, #2980B9 (slightly darker blue). When the button has focus, its background color still becomes #2980B9 . Note the use of comma in the selector. That avoids typing the property twice.
By repeatedly pressing the Tab key on the keyboard, focus will be arrived at the button.
Styling the Inner Menu div
The CSS rule for the inner menu div is:
div.dropdown-content {
display: none;
position: absolute;
z-index: 1;
min-width: 160px;
background-color: #f1f1f1;
}
When the button is not yet clicked, the display of the inner menu div is none. This means that it has not appeared. In order for the inner menu div to appear, this display property has to be made block. When it appears, it will have to cover (be in front of) the content below the button. So it needs the absolute position property, and a z-index of 1, assuming that the body and its other elements are at a z-index of 0. The width of the inner menu div is 160px and its background color is #f1f1f1 (very light gray).
Styling the Anchor Elements
For this project, there are only three anchor elements, and they are all in the inner menu div. The CSS rule for the anchor elements in the inner menu div is:
div.dropdown-content a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
Anchor elements are normally inline elements and would appear in a horizontal line, when typed next to one another. By giving the value of block, to the display property, all the anchor elements will appear one below the other, making a vertical presentation. The color of text is black. The top and bottom padding is 12px and the left and right padding is 16px. The text is not underlined.
The Anchor Elements On-hover
All the anchor elements for this project are in the inner menu div. The CSS rule for that is:
div.dropdown-content a:hover {
background-color: #ddd;
}
The background color becomes #ccc (grayish), when the mouse pointer goes over a hyperlink (anchor element).
The show CSS Rule
The show CSS rule is:
div.show {
display: block;
}
There is no element in the HTML body, with the attribute, "class='show'" . In other words, there is no element in the HTML body with the class-name, "show". This show CSS rule remains only in memory, and it can be applied to any appropriate element in the HTML body. This CSS rule has only one property, which is "display: block;" . JavaScript applies this CSS rule when the button is clicked for the first time, to show the inner menu div (to make its display property, block). It does this by including the show CSS rule into what is known as the classList of the inner menu div. When the button is clicked the second time, or the mouse is clicked outside the button, the show CSS rule is removed from the classList of the inner menu div; and so the inner menu div disappears (its value for the display property becomes none).
JavaScript
When the button is clicked for the first time, the dropdown menu (inner menu div) appears. When the same button is clicked the second time, the dropdown menu disappears. This cycle can repeat. That is known as toggling (of the English verb, toggle). When the click is outside the button, the inner menu div is also made to disappear, if it was showing.
With CSS, the inner menu div has what is known as the classList. This is a kind of array in memory. This classList has the different CSS rules that are applicable to the inner menu div. The classList has a method called, toggle(). This method can be used to include a CSS rule into the classList or remove a CSS rule from the classList. When the CSS rule is included into the classList, its intention (effect) is seen at the screen. When the CSS rule is removed from the classList, its intention (effect) is removed from the screen. The JavaScript code is:
<script type="text/javascript">
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
This code consists of the function, myFunction(), which is called anytime the button is clicked, and another function, window.onclick , which is called anytime any event occurs. Clicking the button is an event; clicking outside the button is another event (both of them happen to be the click event; there are other types of event). The second function (window.onclick) indirectly distinguishes between clicking the button and clicking outside the button.
When the button is clicked for the first time, the myFunction() function is called. It includes the show CSS rule into the classList of the inner menu div, using the toggle("show") method, and the inner menu div is shown (display: block;). When the button is clicked for the second time, the myFunction() function is called again. For this second time, it removes the show CSS rule from the classList of the inner menu div, using the toggle("show") method again, and the inner menu div disappears (display: none;) .
When there is a click, either on the button or outside the button, the window.onclick function is called. This function will remove the inner menu div from the screen, if it is currently shown (it starts by verifying if the click is from outside the button). If the inner menu div is not currently shown, the function will not do anything. Read through the code.
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Clickable Dropdown</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
div.dropdown {
position: relative;
display: inline-block;
}
div.dropdown .dropbtn {
cursor: pointer;
border: none;
background-color: #3498DB;
color: white;
font-size: 16px;
padding: 16px;
}
button.dropbtn:hover, button.dropbtn:focus {
background-color: #2980B9;
}
div.dropdown-content {
display: none;
position: absolute;
z-index: 1;
min-width: 160px;
background-color: #f1f1f1;
}
div.dropdown-content a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
div.dropdown-content a:hover {
background-color: #ddd;
}
div.show {
display: block;
}
</style>
<script type="text/javascript">
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<p>Some content, some content, some content, some content, some content - - -</p>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Click the button to see the dropdown menu. Click on the button again, or click outside the button, for the menu to disappear.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
How to Create Pagination of Numbers with Borders
How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
How to Create a Vertical HTML Button Group with CSS
How To Create a Breadcrumb Navigation Menu
How to Create a Hover-able Dropup Menu with CSS Only
How to Create a Clickable Dropdown Menu with CSS and JavaScript
How to Create a Clickable Dropdown Menu inside a Responsive Navigation Sidebar with CSS and JavaScript
How to Create a Hover-able Dropdown Menu inside a Responsive Horizontal Navigation Bar with CSS and JavaScript
How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .NEXT