Core Code
Core Code Modern Dev Handbook

CSS Animated Dropdown

Transitions can animate dropdown appearance.

Preview

Code

<style>
.dropdown{
position:relative;
display:inline-block;
}

.menu{
opacity:0;
position:absolute;
background:#fde68a;
padding:10px;
transition:opacity 0.3s;
}

.dropdown:hover .menu{
opacity:1;
}
</style>

<div class="dropdown">
Hover menu
<div class="menu">Animated dropdown</div>
</div>

More CSS Dropdowns Examples (8)

example CSS Basic Dropdown open example example CSS Hover Dropdown open example example CSS Dropdown Menu List open example example CSS Dropdown Button open example example CSS Right Aligned Dropdown open example example CSS Dropdown With Icon open example example CSS Card Style Dropdown open example example CSS Navbar Dropdown open example