How to Create a Hover-able Dropdown Menu with CSS Only
Dropdown Menu
How To, for Web Applications
By: Chrysanthus Date Published: 12 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 with CSS Only. The menu consists of hyperlinks placed vertically. When the mouse pointer goes outside of the button or outside of the dropdown menu, 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. 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>Hoverable 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.">
<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, 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. 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>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
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 (appeared) 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.
Strategy
The inner 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 outer div. At that time, the area of the button and the area of the outer div are the same. By the code, the mouse pointer is actually going over the outer div and not really over the button, in order to have the inner div and its content displayed.
When the inner div is displayed, it will push the bottom part of the outer div downwards, increasing the area of the outer div, which will then contain both the button and the inner 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 outer div, and not really out of the menu div or out of the button. When the mouse pointer goes out of the extended outer div, the menu div disappears, leaving back the button and the outer 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. 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 for the appearance and disappearance of the menu div, is within the start and end tags of the HTML style element. The class-name, "dropdown" for the outer div is used. The class-name, "dropbtn" for the button is used. The class-name, "dropdown-content" for the inner menu div is used.
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 the 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 button.dropbtn {
border: none;
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
}
There is no border. The background color is #04AA6D (greenish). 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
The CSS rule for the button on-hover is:
div.dropdown button.dropbtn:hover {
background-color: #3e8e41;
}
When the mouse pointer goes over the button, its background color becomes, #3e8e41 (slightly darker green).
It is good to really understand the selector here. The selector is "div.dropdown button.dropbtn:hover". There are two expressions here. The second expression, "button.dropbtn:hover" means, when the button whose class-name is "dropbtn", is on-hover. The first expression, "div.dropdown" refers to the div whose class-name is "dropdown". Since there is no comma between both expressions (just a space is present), it means that the button is a child element of the div element.
Styling the Inner Menu div
The CSS rule for the inner menu div is:
div.dropdown-content {
display: none;
position: absolute;
z-index: 1;
width: 160px;
background-color: #f1f1f1;
}
When the mouse pointer is not over the button, actually not over the outer div, which has the same size as the button at that time, 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).
The inner menu div should appear just below the button, as was coded.
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.
Making the Inner Menu div Appear
When the mouse pointer goes over the button, actually over the outer div, whose class-name is "dropdown", in order for the inner 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 inner menu div (div.dropup-content) is none, the inner menu div is not shown. On-hover, this CSS rule overrides that property and makes it block; then the inner menu div appears.
The first expression, "div.dropup:hover" in the selector, is for when the mouse pointer goes over the outer div, whose size at that time is the same as that of the button. The outer div always has the button as one of its contents. The outer div extends downwards, when the inner menu div appears.
The display property (display: block;) in the CSS rule, applies to the inner menu div (div.dropdown-content), and not to the outer div (dropup). What concerns the outer div in the selector, is the pseudo class, ":hover".
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 #ddd (grayish), when the mouse pointer goes over a hyperlink (anchor element).
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Hoverable 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.">
<style>
div.dropdown {
position: relative;
display: inline-block;
}
div.dropdown button.dropbtn {
border: none;
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
}
div.dropdown button.dropbtn:hover {
background-color: #3e8e41;
}
div.dropdown-content {
display: none;
position: absolute;
z-index: 1;
width: 160px;
background-color: #f1f1f1;
}
div.dropdown:hover div.dropdown-content {
display: block;
}
div.dropdown-content a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
div.dropdown-content a:hover {
background-color: #ddd;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</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.
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