Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a dropup menu with CSS?
A dropup menu is a navigation component where the menu items appear above the trigger button when hovered or clicked. Unlike traditional dropdown menus that open downward, dropup menus are useful when the trigger is near the bottom of the viewport.
Syntax
.dropup-menu {
position: relative;
}
.menu-content {
position: absolute;
bottom: 100%; /* Opens upward */
display: none;
}
.dropup-menu:hover .menu-content {
display: block;
}
Key Properties
| Property | Description |
|---|---|
position: absolute |
Positions the menu relative to its container |
bottom: 100% |
Places the menu above the trigger button |
z-index |
Ensures the menu appears above other elements |
Example
The following example creates a dropup menu that appears when hovering over a button −
<!DOCTYPE html>
<html>
<head>
<style>
.menu-btn {
background-color: #7e32d4;
color: white;
padding: 16px;
font-size: 20px;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: none;
cursor: pointer;
}
.dropdown-menu {
position: relative;
display: inline-block;
margin-top: 200px;
}
.menu-content {
display: none;
position: absolute;
bottom: 100%;
background-color: #017575;
min-width: 160px;
z-index: 1;
box-shadow: 0px -8px 16px rgba(0,0,0,0.2);
}
.links {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.links:hover {
background-color: #3e8e41;
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hover over the button to open the dropup menu</h2>
<div class="dropdown-menu">
<button class="menu-btn">Menu ?</button>
<div class="menu-content">
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">Visit Us</a>
<a class="links" href="#">About Us</a>
</div>
</div>
</body>
</html>
A purple button with "Menu ?" text appears. When you hover over it, a teal menu with three options (Contact Us, Visit Us, About Us) appears above the button. The menu items have hover effects that change their background to green.
Conclusion
Dropup menus are created by setting position: absolute and bottom: 100% on the menu content. They provide an elegant solution for navigation when screen space below the trigger is limited.
Updated on: 2026-03-15T14:20:59+05:30
875 Views
Advertisements