How to Create a Clickable Dropdown Menu inside a Horizontal Navigation Bar using CSS and JavaScript
Dropdown Menu
How To, for Web Applications
By: Chrysanthus Date Published: 17 Apr 2025
When a button is clicked, and a menu appears below the button as a result, covering some content of the body, then that is a clickable dropdown button. The menu is a clickable dropdown menu. This tutorial explains How to Create a Clickable Dropdown Menu inside a Horizontal Navigation Bar using CSS and JavaScript. Here, the word, navigation, means that the horizontal bar has essentially hyperlinks.
The complete webpage code is given at the end of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Click the dropdown button to see the dropdown menu with hyperlinks. Click the dropdown button again or click outside the button, for the dropdown menu to go off. The reader is advised to do that before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The webpage skeleton code to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Clickable Dropdown Menu inside a Horizontal Navigation Bar</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 fifth tag imports the solid lowercase v icon, that will be by the dropdown button. It imports it from the cloudflare.com website. The style element will have quite a good amount of code, which will make the menu appear and disappear, and also serve other purpose. The JavaScript will have some code to initiate the appearance and disappearance of the dropdown menu, after clicking. 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, which is inside the horizontal bar div. 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:
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn" onclick='myFunction()'>Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" id='myDropdown'>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
There are three div elements for the horizontal bar. There is the outermost div, with class-name "navbar" This is the div for the horizontal navigation bar. The first two elements in this div are hyperlinks (anchor elements). The next element in this div is an inner div, with class-name, "dropdown". The first element in this inner div, is the button element with class-name, "dropbtn". The next element in the inner div is an innermost div. This innermost div is the menu div for drop-down. Its class-name is "dropdown-content". It has three anchor (a) elements (hyperlinks). When it is dropped-down, its three hyperlinks will be seen by the user.
When the webpage is just open at the browser, the user sees the Home hyperlink, the News hyperlink, and the button, in that order, from the left. If the button is clicked, the drop-down list will appear, with the hyperlinks: Link 1, Link 2 and Link 3, vertically.
The button has the onclick element, "onclick='myFunction()' " When the button is clicked, myFunction() is called. If the innermost menu div was not shown (was not displayed), the function will make it appear. If is was displayed, the function will make it disappear. There is another code in the JavaScript, to determine, if the click was outside the button. If the click was outside the button, then the code will make sure, the innermost menu div is not displayed.
Note that the content of the button element is "Dropdown <i class='fa fa-caret-down'></i>" . The first part of the content is the text, "Dropdown ". The second part is the i element, "<i class='fa fa-caret-down'></i>" . It should interest the reader that the i element does not have any content. It should not have, for this task! The i element is actually the icon, that is twisted into an image. The class-name for the i element is 'fa fa-caret-down' . 'fa' refers to a CSS rule in the imported font-awesome/4.7.0 library. 'fa-caret-down' refers to another CSS rule in the imported font-awesome/4.7.0 library. The two rules twist the i element into an image (icon).
Strategy
The innermost menu div (div.dropdown-content) is given a display value of none, so that it should not be shown. When the button is clicked, JavaScript indirectly gives it a display value of block, so that it should be shown. If the button is clicked again, the reverse takes place. This alternation (toggling) can be repetitive.
The Style Element Content
All the styling for the appearance and disappearance of the menu div, is within the start and end tags of the HTML style element. The class-name, "navbar" for the outermost div is used. The class-name, "dropdown" for the inner div is used. The class-name, "dropbtn" for the button is used. The class-name, "dropdown-content" for the innermost menu div, is used.
Styling the body Element
The CSS rule for the body element is:
body {
font-family: Arial, Helvetica, sans-serif;
}
The font to use is Arial. If the browser does not have Arial, it should have Helvetica. If it does not have Helvetica, then any sans-serif font that it has, should be used.
Styling the Outermost div
The CSS rule for the outermost div with class-name, "navbar" is:
div.navbar {
overflow: hidden;
background-color: #333;
}
The background color of this bar is #333 (rather black).
If the property and value, "overflow: hidden;" is absent, then all the elements in the div.navbar, with their heavy styling, will not be held in one assembly.
Styling the Anchor Elements
The outermost div has two anchor elements that are its children. The outermost div, also has as a child, the div with class-name "dropdown". This div has as a child, the innermost menu div. The innermost menu div has as children, its own anchor elements. So the anchor elements of the innermost div are great grand children of the outermost div. The CSS rule for the anchor elements of the outermost div, are applicable to all the anchor elements it has, including the great grand children anchor elements. That CSS rule is:
div.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
All the anchor elements, including the great grand children anchor elements, are floated left. At this point, it is assumed that the reader knows the use of the rest of the properties in the CSS rule.
Styling the Inner div
The HTML inner div has the class-name, "dropdown" . The first element of this inner div is the button. The second element is the innermost div, that has the drop-down anchor elements. The CSS rule for the inner div is:
div.dropdown {
float: left;
}
The inner div and all its content is floated left, as one assembly. Conception of the dropdown menu begins from this inner div.
Styling the button
The CSS rule for the button is:
div.dropdown button.dropbtn {
border: none;
margin: 0;
cursor: pointer;
font-size: 16px;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
The border is none, so that the button fits into the horizontal bar like the preceding hyperlinks. The background color of the button is the background color of its parent container: inherited. The font-family for the button text, is the font-family for the parent container: inherited. At this point, it is assumed that the reader knows the use of the rest of the properties in the CSS rule.
Styling the Innermost div
The innermost div whose class-name is "dropdown-content", has the dropdown hyperlinks. It is the menu div. The CSS rule for the innermost div is:
div.dropdown-content {
display: none;
position: absolute;
z-index: 1;
width: 160px;
background-color: #f9f9f9;
}
When the button has not been clicked for the first time, the innermost menu div, which has the same size as the button at that time, has the display value of none. This means that it has not appeared. In order for the innermost 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 innermost menu div is 160px and its background color is #f9f9f9 (very light gray).
The innermost menu div should appear just below the button, as was coded.
First two Horizontal Hyperlinks On-hover, with Button On-hover and Focused
When the mouse pointer goes over the first two hyperlinks in the horizontal bar or over the button, the background color of the hyperlinks or the background color of the button, becomes red. The CSS rule for the two cases is:
div.navbar a:hover, div.dropdown:hover button.dropbtn, div.dropdown button.dropbtn:focus {
background-color: red;
}
This rule is also applicable for the button on-focus, making it three cases. Note the use of the comma in the selector (in two places).
Styling the Dropdown Anchor Elements
For this project, there are only three dropdown anchor elements, and they are all in the innermost menu div. Their styling has some differences with the first two hyperlinks in the horizontal div. There is a CSS rule dedicated to them, where some properties override those for all the anchor elements for the horizontal bar. The CSS rule for the anchor elements in the innermost menu div is:
div.dropdown-content a {
display: block;
float: none;
color: black;
padding: 12px 16px;
text-align: left;
}
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, overriding the white color for the other anchor elements. The padding is "12px 16px;" instead of "14px 16px;" for the other hyperlinks. Text within an anchor element is 'left-align', overriding 'center' for the other hyperlinks. The text is not underlined (inherited from the "div.navbar a" CSS rule).
The Dropdown Anchor Elements On-hover
All the dropdown anchor elements for this project are in the innermost menu div. The CSS rule for that is:
div.dropdown-content a:hover {
background-color: #ddd;
}
The background color becomes #ddd (grayish), when the mouse pointer goes over a dropdown 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 the 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(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.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() 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;) .
If the click was outside the button, when the innermost menu div was shown (displayed), the window.onclick function would remove the show CSS rule from the classList, and the innermost menu div would disappear.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Clickable Dropdown Menu inside a Horizontal Navigation Bar</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>
body {
font-family: Arial, Helvetica, sans-serif;
}
div.navbar {
overflow: hidden;
background-color: #333;
}
div.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
div.dropdown {
float: left;
}
div.dropdown button.dropbtn {
border: none;
margin: 0;
cursor: pointer;
font-size: 16px;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
div.dropdown-content {
display: none;
position: absolute;
z-index: 1;
width: 160px;
background-color: #f9f9f9;
}
div.navbar a:hover, div.dropdown:hover button.dropbtn, div.dropdown button.dropbtn:focus {
background-color: red;
}
div.dropdown-content a {
display: block;
float: none;
color: black;
padding: 12px 16px;
text-align: left;
}
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(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn" onclick='myFunction()'>Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" id='myDropdown'>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</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 file in the browser. Click the dropdown button to see the dropdown menu with hyperlinks. Click the dropdown button again or click outside the button, for the dropdown menu to go off.
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 . . .BACK NEXT