/* each list item */ .nav-item position: relative;
<!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;
.brand-header p color: #2c3e50; margin-top: 0.5rem; font-weight: 500; font-size: 0.95rem; opacity: 0.8;
/* 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; html css dropdown menu codepen
/* responsive: for smaller screens ensure dropdown appears nicely */ @media (max-width: 780px) .nav-menu padding: 0.5rem; border-radius: 2rem; .nav-link padding: 0.6rem 1rem; font-size: 0.9rem; .dropdown-menu min-width: 190px;
/* additional second level nested dropdown (advanced bonus) */ .dropdown-submenu position: relative;
<!-- main dropdown navigation bar --> <nav class="nav-menu" aria-label="Main navigation with dropdowns"> <ul class="nav-list"> <!-- Home item (no dropdown) --> <li class="nav-item"> <a href="#" class="nav-link"> 🏠 <span>Home</span> </a> </li> /* each list item */
<!-- 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>
.hero-content h2 font-weight: 600; color: #1e3a5f; font-size: 1.7rem;
.dropdown-submenu:hover .submenu-arrow transform: translateX(3px); meta name="viewport" content="width=device-width
<!-- About (no dropdown) --> <li class="nav-item"> <a href="#" class="nav-link"> 🌟 About </a> </li> </ul> </nav>
.hero-content p color: #2c3e50; max-width: 550px; margin: 1rem auto 0; line-height: 1.5;
/* 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);
/* show dropdown on hover */ .nav-item:hover > .dropdown-menu opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;