Menu Codepen — Html Css Dropdown

.dropdown-menu a:hover background: #f8fafd; color: #1a4972; border-left-color: #2c7da0; padding-left: 1.9rem;

/* header / branding */ .brand-header text-align: center; margin-bottom: 2rem;

.badge-note background: #1e3a5f10; display: inline-block; border-radius: 40px; padding: 0.2rem 1rem; font-size: 0.8rem; font-weight: 500; color: #2c5a7a; margin-top: 1rem;

<div class="hero-content"> <h2>Pure CSS Dropdown Experience</h2> <p>Hover over any menu item with a chevron ▼ — elegant submenus appear smoothly. <br> Includes nested dropdown inside "Services → Development". Fully responsive and keyboard accessible via focus.</p> <div class="badge-note"> 🧪 CSS only • No JavaScript • Clean transitions </div> </div> </div> <footer> ⚡ Modern dropdown menu | Hover to expand | Nested support | Pure HTML/CSS </footer> html css dropdown menu codepen

/* a subtle animation for demonstration */ @keyframes gentleFade 0% opacity: 0; transform: scale(0.98); 100% opacity: 1; transform: scale(1);

/* ----- DROPDOWN MENU STYLES (multi-level but flat design) ----- */ .dropdown-menu position: absolute; top: calc(100% + 0.7rem); left: 0; min-width: 220px; background: #ffffff; border-radius: 1.5rem; padding: 0.7rem 0; list-style: none; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0,0,0,0.02); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: all 0.28s cubic-bezier(0.2, 0.9, 0.4, 1.1); pointer-events: none; z-index: 200; backdrop-filter: blur(0px);

/* additional second level nested dropdown (advanced bonus) */ .dropdown-submenu position: relative; we use pure css hover for dropdown */

<!-- Services dropdown (with nested submenu) --> <li class="nav-item"> <a href="#" class="nav-link"> ⚙️ Services <span class="dropdown-arrow">▼</span> </a> <ul class="dropdown-menu"> <li><a href="#"><span class="menu-icon">🎨</span> UI/UX Design</a></li> <li><a href="#"><span class="menu-icon">📈</span> Consulting</a></li> <!-- nested submenu item (dropdown inside dropdown) --> <li class="dropdown-submenu"> <a href="#"> <span class="menu-icon">⚡</span> Development <span class="submenu-arrow">›</span> </a> <ul class="dropdown-menu"> <li><a href="#">Frontend</a></li> <li><a href="#">Backend</a></li> <li><a href="#">Full Stack</a></li> <li><a href="#">DevOps</a></li> </ul> </li> <li><a href="#"><span class="menu-icon">🔍</span> SEO & Analytics</a></li> </ul> </li>

.dropdown-submenu:hover > .dropdown-menu opacity: 1; visibility: visible; transform: translateX(0px) translateY(-4px);

<!-- Resources dropdown (with multiple options) --> <li class="nav-item"> <a href="#" class="nav-link"> 📚 Resources <span class="dropdown-arrow">▼</span> </a> <ul class="dropdown-menu"> <li><a href="#"><span class="menu-icon">📖</span> Documentation</a></li> <li><a href="#"><span class="menu-icon">🎓</span> Tutorials</a></li> <li><a href="#"><span class="menu-icon">💡</span> Blog</a></li> <li><a href="#"><span class="menu-icon">🌍</span> Community</a></li> </ul> </li> .dropdown-menu top: 0

<!-- About (no dropdown) --> <li class="nav-item"> <a href="#" class="nav-link"> 🌟 About </a> </li> </ul> </nav>

.dropdown-menu a display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.5rem; color: #1f2e3a; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: all 0.2s; background: white; border-left: 3px solid transparent;

/* rotate arrow when parent hover (desktop) OR using active class for touch? we use pure css hover for dropdown */ .nav-item:hover .dropdown-arrow transform: rotate(180deg);

/* hover & focus effect on main links */ .nav-link:hover background: #f0f4f9; color: #0f2b3d; transform: translateY(-2px);

.dropdown-submenu > .dropdown-menu top: 0; left: 100%; margin-left: 0.4rem; transform: translateX(-8px) translateY(-8px);