Dropdown Generator
Create dropdown menus with hover/click triggers
Trigger
Animation
0.3s
Styling
8px
16px
12px
8px
Live Preview
Generated CSS
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
padding: 12px 16px;
background: #3b82f6;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
min-width: 200px;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s, transform 0.3s;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
transform: translateY(0) scale(1);
}
.dropdown-item {
padding: 12px 16px;
cursor: pointer;
transition: background 0.2s;
}
.dropdown-item:hover {
background: #f3f4f6;
}