Html Css Dropdown Menu Codepen Page
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;
/* 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
.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; body background: linear-gradient(145deg
.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; padding: 0.8rem 1.4rem
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Elegant Dropdown Menu | Pure HTML/CSS</title> <style> /* ----- RESET & GLOBAL STYLES ----- */ * margin: 0; padding: 0; box-sizing: border-box;
.dropdown-submenu:hover .submenu-arrow transform: translateX(3px);