How to Create a Hover-able Dropdown Menu inside a Responsive Navigation Sidebar with CSS Only
Dropdown Menu
How To, for Web Applications
By: Chrysanthus Date Published: 14 Apr 2025
A navigation sidebar for a webpage, is a narrow vertical menu bar of hyperlinks, on the left or right side of the webpage. This tutorial explains How to Create a Hover-able Dropdown Menu inside a Responsive Navigation Sidebar with CSS Only. So, in the project for this tutorial, there is a navigation sidebar on the left of the page, and when the mouse pointer goes over one of the menu items, a dropdown menu will appear, pushing down the rest of the menu hyperlinks. The menu item that will drop-down the sub-menu, is actually an HTML button element; it is not a hyperlink. All the menu items except the button, are hyperlinks.
The webpage is responsive in the sense that, for a small screen, when the height of the page is less than 450px, at least the font-size of the sidebar text should reduce.
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, which will push two hyperlinks downwards. Reduce the height of the webpage continuously until the text reduces in font-size. 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 Responsive Navigation Sidebar</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 vertical bar div. All that content will be inside the HTML body element (on the left); not shown in the skeleton code above.
The Content of the HTML body Element
The content of the body element is:
<div class="sidenav">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<div class="dropdown">
<button class="dropdown-btn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#search">Search</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Sidebar Dropdown</h2>
<p>Some random text.. The next example will show you how to make the dropdown link functional.</p>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Some random text..</p>
</div>
There are three div elements for the sidebar. There is the outermost div, with class-name "sidenav" This is the div for the vertical navigation bar. The first four elements in this div are hyperlinks (anchor elements), which are the Home, About, Services, and Clients. 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, "dropdown-btn". 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-container". It has three anchor (a) elements (hyperlinks). When it is dropped-down, its three hyperlinks are seen by the user.
The inner div with class-name, "dropdown" has two more elements after the innermost menu div. These two elements are hyperlinks. They are the Search and Contact hyperlinks. When the drop-down occurs, these two hyperlinks are pushed further downwards.
When the webpage is just open at the browser, the user sees the first four hyperlinks, the button with content name, "Dropdown" and the icon by its side, and then the Search and Contact hyperlinks. 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.
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 this 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, "sidenav" for the outermost div is used. The class-name, "dropdown" for the inner div is used. The class-name, "dropdown-btn" for the button is used. The class-name, "dropdown-container" for the innermost menu div is used.
Styling the body Element
The CSS rule for the body element is:
body { font-family: "Lato", sans-serif; }
The font to use is "Lato". If the browser does not have "Lato", 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, "sidenav" is:
div.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding-top: 20px;
}
The height is 100%, from the top of the page to the bottom. The width is 200px. The left margin of the div for the main document will be 200px, so that the sidebar will be over it and will not cover any content. The sidebar does not move with scrolling, so it has a fixed position. Since the sidebar will be in front of the main document div, it has a z-index of 1, assuming that the main document div has a z-index of 0. The "top: 0;" and "left: 0;" properties, mean that the top edge of the sidebar will align with the top edge of the webpage, and the left edge of the sidebar will align with the left edge of the webpage. The background color of this sidebar is #111 (rather black). The padding-top is 20px, but will reduce to 10px, when responsive.
Styling the Anchor Elements in the Outermost div and the Button
This styling includes the anchor elements in the innermost div, though some of the properties in the innermost div can be overridden. The button has to be styled the same way like the hyperlinks for consistency.
The outermost div has six anchor elements that are its children (four before the inner div and two after). 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.sidenav a, button.dropdown-btn {
display: block;
border: none;
padding: 6px 8px 6px 16px;
font-size: 20px;
color: #818181;
text-align: left;
cursor: pointer;
background: none;
text-decoration: none;
}
Anchor elements are by default, 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 button has also be given the value of block. The border is none, to avoid unequal heights and widths between the anchor elements and the button. "cursor: pointer;" means that when the mouse pointer goes over the button as well, it should remain a hand. The background is none, meaning that the background of the anchor elements and the button is that of the sidebar. 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-container", has the dropdown hyperlinks. It is the menu div. The CSS rule for the innermost div is:
div.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
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 pushes down the last two previously visible hyperlinks.
The background color is made slightly lighter than that of the sidebar. There is an additional left padding of 8px. These two properties make it look different from the rest of the sidebar.
The Six Hyperlinks On-hover, and Button On-hover
When the mouse pointer goes over the six hyperlinks in the sidebar or over the button, the color of the hyperlinks or the color of the button, becomes #f1f1f1 (whitish). The CSS rule for the two cases is:
div.sidenav a:hover, button.dropdown-btn:hover {
color: #f1f1f1;
}
This rule is applicable to the dropdown hyperlinks as well. Note the use of the comma, in the selector.
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-container {
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-container), and not to the inner div (dropdown). What concerns the inner div in the selector, is the pseudo class, ":hover".
Responsiveness
When the device screen has a height less than or equal to 450px, the top padding of the sidebar goes from 20px to 10px; the font-size of the hyperlinks, the button, and the dropdown hyperlinks, go from 20px to 16px. That needs a media screen query, which is:
@media screen and (max-height: 450px) {
div.sidenav {
padding-top: 10px;
}
div.sidenav a {
font-size: 16px;
}
div.dropdown button.dropdown-btn {
font-size: 16px;
}
}
Styling the Main Document div
The sidebar is in front of the left margin of the div for the main document. So the margin for the main document has to be at least the width of the sidebar, of 200px. The CSS rule for the main document div is:
div.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
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 Responsive Navigation Sidebar</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: "Lato", sans-serif;
}
/* Fixed sidenav, full height */
div.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
div.sidenav a, button.dropdown-btn {
display: block;
border: none;
padding: 6px 8px 6px 16px;
font-size: 20px;
color: #818181;
text-align: left;
cursor: pointer;
background: none;
text-decoration: none;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
div.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* On mouse-over */
div.sidenav a:hover, button.dropdown-btn:hover {
color: #f1f1f1;
}
div.dropdown:hover div.dropdown-container {
display: block;
}
/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
div.sidenav {
padding-top: 10px;
}
div.sidenav a {
font-size: 16px;
}
div.dropdown button.dropdown-btn {
font-size: 16px;
}
}
/* Main content */
div.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
div.sidenav a.active {
background-color: green;
color: white;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="sidenav">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<div class="dropdown">
<button class="dropdown-btn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#search">Search</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Sidebar Dropdown</h2>
<p>Some random text.. The next example will show you something else.</p>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Some random text..</p>
</div>
</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, which will push two hyperlinks downwards. Reduce the height of the webpage continuously until the text reduces in font-size.
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