Pure CSS interactive menus – copy, paste, and customize.
<div class="dropdown-wrapper">
<button class="dropdown-trigger">Solutions</button>
<ul class="dropdown-menu-list">
<li><a href="#">Analytics</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Security</a></li>
</ul>
</div>
<style>
.dropdown-wrapper { position: relative; display: inline-block; }
.dropdown-trigger { background: #3b82f6; color: white; padding: 10px 20px; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.dropdown-trigger::after { content: '▼'; font-size: 10px; transition: transform 0.3s; }
.dropdown-menu-list { position: absolute; top: 100%; left: 0; background: white; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); list-style: none; min-width: 160px; padding: 6px 0; margin-top: 8px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s; }
.dropdown-menu-list li a { display: block; padding: 8px 16px; color: #334155; text-decoration: none; }
.dropdown-menu-list li a:hover { background: #f1f5f9; color: #3b82f6; }
.dropdown-wrapper:hover .dropdown-menu-list { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-wrapper:hover .dropdown-trigger::after { transform: rotate(180deg); }
</style><div class="profile-dropdown">
<button class="profile-trigger">
<div class="profile-avatar">M</div> My Account
</button>
<div class="profile-menu">
<a href="#">👤 View Profile</a>
<a href="#">⚙️ Settings</a>
<div class="profile-divider"></div>
<a href="#" style="color: #ef4444;">🚪 Sign Out</a>
</div>
</div>
<style>
.profile-dropdown { position: relative; display: inline-block; }
.profile-trigger { background: #1e293b; color: white; border: none; padding: 6px 14px; border-radius: 20px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.profile-avatar { width: 24px; height: 24px; background: linear-gradient(135deg, #f59e0b, #ef4444); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.profile-menu { position: absolute; top: 100%; right: 0; background: white; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); width: 200px; padding: 8px; margin-top: 8px; opacity: 0; visibility: hidden; transform: scale(0.95); transform-origin: top right; transition: all 0.2s ease; }
.profile-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; color: #475569; text-decoration: none; border-radius: 8px; }
.profile-menu a:hover { background: #f8fafc; color: #0f172a; }
.profile-divider { height: 1px; background: #e2e8f0; margin: 6px 0; }
.profile-dropdown:hover .profile-menu { opacity: 1; visibility: visible; transform: scale(1); }
</style>Get 50+ advanced interactive drop-downs, animated select boxes, and megamenus in our Pro Pack.
Get Pro Pack – $7 →These free snippets took time to create. A small coffee keeps them coming.
✨ Buy Me a Coffee