How to Create a Clickable Dropdown Broad 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. The menu can be vertically narrow or it can be vertically broad, from the left end of the webpage to the right end of the webpage. This tutorial explains How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript. The dropdown menu extends from the left end of the webpage to the right end of the webpage. Here, the word, navigation, means that the horizontal bar and dropdawn menu, have 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 broad 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 Broad 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 onclick="myFunction()" class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a style='float:right' href="#">Link 4</a><br>
<a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <a style='float:right' href="#">Link 8</a><br>
<a href="#">Link 9</a> <a href="#">Link 10</a> <a href="#">Link 11</a> <a style='float:right' href="#">Link 12</a><br>
</div>
</div>
</div>
<h3>Dropdown Broad Menu inside a Navigation Bar</h3>
<p>Click the "Dropdown" link to see the dropdown broad 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.
The content of the innermost div will not be explained in this tutorial. Just know that it comes out as a broad strip, from the left end of the webpage to the right end of the webpage; covering the body content behind it, just under the horizontal navigation bar.
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 dropdown menu div will be given a width of 100%, and be forced to start from the left edge of the webpage.
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;
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: 100%;
left: 0;
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 100%, and so must go across the width of the webpage. However, the property and value, "left: 0;" is necessary, to make sure it starts at left edge of the webpage, since the CSS rule has the absolute position property. The background color is #f9f9f9 (very light gray).
The innermost menu div should appear just below the button, as was coded.
First two Horizontal Hyperlinks and Button On-hover
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 {
background-color: red;
}
Note the use of the comma in the selector.
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 Broad 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;
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: 100%;
left: 0;
background-color: #f9f9f9;
}
div.dropdown-content a {
float: none;
color: black;
padding: 2px 6px;
text-decoration: none;
text-align: left;
}
div.navbar a:hover, div.dropdown:hover button.dropbtn {
background-color: red;
}
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 onclick="myFunction()" class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a style='float:right' href="#">Link 4</a><br>
<a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <a style='float:right' href="#">Link 8</a><br>
<a href="#">Link 9</a> <a href="#">Link 10</a> <a href="#">Link 11</a> <a style='float:right' href="#">Link 12</a><br>
</div>
</div>
</div>
<h3>Dropdown Broad Menu inside a Navigation Bar</h3>
<p>Click the "Dropdown" link to see the dropdown broad 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 broad 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