Html Css Dropdown Menu Codepen File

/* main card / container to showcase menu */ .demo-container background: rgba(255,255,255,0.35); backdrop-filter: blur(3px); border-radius: 2.5rem; padding: 2.5rem 1.5rem; box-shadow: 0 20px 35px -12px rgba(0,0,0,0.2); width: 100%; max-width: 1200px; transition: all 0.2s;

body background: linear-gradient(145deg, #e9f0fc 0%, #d9e2ef 100%); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem;

.brand-header p color: #2c3e50; margin-top: 0.5rem; font-weight: 500; font-size: 0.95rem; opacity: 0.8;

/* main link style */ .nav-link display: flex; align-items: center; gap: 0.4rem; padding: 0.8rem 1.4rem; font-weight: 600; font-size: 1rem; color: #1f2e3a; text-decoration: none; border-radius: 2.5rem; transition: all 0.25s ease; background: transparent; letter-spacing: -0.2px; html css dropdown menu codepen

<nav class="nav-menu" aria-label="Main navigation with dropdowns"> <ul class="nav-list">  <li class="nav-item"> <a href="#" class="nav-link"> 🏠 <span>Home</span> </a> </li>

/* additional second level nested dropdown (advanced bonus) */ .dropdown-submenu position: relative;

.hero-content p color: #2c3e50; max-width: 550px; margin: 1rem auto 0; line-height: 1.5; /* main card / container to showcase menu */

.demo-container animation: gentleFade 0.5s ease-out;

/* dropdown arrow indicator (custom caret) */ .dropdown-arrow font-size: 0.7rem; transition: transform 0.25s ease; display: inline-block; margin-left: 0.2rem; font-weight: 700;

/* 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); padding: 2.5rem 1.5rem

/* optional icon inside dropdown */ .menu-icon font-size: 1.1rem; display: inline-block; width: 1.4rem; text-align: center;

/* content area for demo - just to show menu context */ .hero-content margin-top: 3rem; text-align: center; background: rgba(255,255,240,0.7); backdrop-filter: blur(4px); padding: 2rem; border-radius: 2rem; box-shadow: 0 8px 20px rgba(0,0,0,0.05);

.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;