How to Create a Hover-able Dropdown Menu inside a Horizontal Navigation Bar with CSS Only
Dropdown Menu
How To, for Web Applications
By: Chrysanthus Date Published: 13 Apr 2025
When the mouse pointer goes over a button, and a menu appears below the button, covering content that is below the button, that is a dropdown menu. This tutorial explains How to Create a Hover-able Dropdown Menu inside a Horizontal Navigation Bar with CSS Only. The drop-down menu consists of hyperlinks placed vertically. When the mouse pointer goes outside of the button or outside of the dropdown menu, the menu disappears. The button is in the horizontal navigation bar. Besides the button in the horizontal navigation bar, there are other menu items, which are hyperlinks.
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. Hover over the button to see the dropdown menu. 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>Hover-able 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. The JavaScript will be empty in order not to make this teaching project long. 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 bar div. All that content will be inside the HTML body element (around the top); 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">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<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>Hover over the "Dropdown" link to see the dropdown menu.</p>
There are three div elements. 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 mouse pointer goes over the button, the drop-down list will appear, with the hyperlinks: Link 1, Link 2 and Link 3, vertically.
Strategy
The innermost div for the menu is not displayed when the page is opened. Under that condition, only the button is seen. The button happens to be inside the inner div. At that time, the area of the button and the area of the inner div are the same. By the code, the mouse pointer is actually going over the inner div and not really over the button, in order to have the innermost div and its content displayed.
When the innermost div is displayed, it will push the bottom part of the inner div downwards, increasing the area of the inner div, which will then contain both the button and the innermost menu div, down.
By the code, when the mouse pointer goes out of the displayed menu div or out of the button, it is actually going out of the inner div, and not really out of the menu div or out of the button. When the mouse pointer goes out of the extended inner div, the menu div disappears, leaving back the button and the inner div, having the same (small) area.
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.
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.
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. Conception of the dropdown menu begins from this inner div.
Styling the button
The CSS rule for the button is:
div.dropdown button.dropbtn {
font-size: 16px;
border: none;
margin: 0;
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 mouse pointer is not over the button, actually not over the inner div, which has the same size as the button at that time, the display of the innermost menu div is 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 inner 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, 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.
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).
Making the Innermost Menu div Appear
When the mouse pointer goes over the button, actually over the inner div, whose class-name is "dropdown", in order for the innermost div to appear, its display property has to be made block. The CSS rule for that is:
div.dropdown:hover div.dropdown-content {
display: block;
}
When the value of the display property of the innermost menu div (div.dropdown-content) is none, the innermost menu div is not shown. On-hover, this CSS rule overrides that property and makes it block; then the innermost menu div appears.
The first expression, "div.dropdown:hover" in the selector, is for when the mouse pointer goes over the inner div, whose size at that time is the same as that of the button. The inner div always has the button as one of its contents. The inner div extends downwards, when the innermost menu div appears.
The display property (display: block;) in the CSS rule, applies to the innermost menu div (div.dropdown-content), and not to the inner div (dropdown). What concerns the inner div in the selector, is the pseudo class, ":hover".
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 Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Hover-able 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 {
font-size: 16px;
border: none;
margin: 0;
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 {
background-color: red;
}
div.dropdown-content a {
display: block;
float: none;
color: black;
padding: 12px 16px;
text-align: left;
}
div.dropdown:hover div.dropdown-content {
display: block;
}
div.dropdown-content a:hover {
background-color: #ddd;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<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>Hover over 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 saved file in the browser. Hover over the button to see the dropdown menu.
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