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;
/* additional second level nested dropdown (advanced bonus) */ .dropdown-submenu position: relative;
/* 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); html css dropdown menu codepen
/* main navigation list */ .nav-list display: flex; list-style: none; gap: 0.25rem; flex-wrap: wrap; justify-content: center;
<!-- Products dropdown (mega style dropdown but standard) --> <li class="nav-item"> <a href="#" class="nav-link"> 📦 Products <span class="dropdown-arrow">▼</span> </a> <ul class="dropdown-menu"> <li><a href="#"><span class="menu-icon">🖥️</span> Desktop Apps</a></li> <li><a href="#"><span class="menu-icon">📱</span> Mobile Solutions</a></li> <li><a href="#"><span class="menu-icon">☁️</span> Cloud Platform</a></li> <li class="dropdown-divider"></li> <li><a href="#"><span class="menu-icon">🔌</span> Integrations</a></li> </ul> </li> .badge-note background: #1e3a5f10
/* 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;
/* show dropdown on hover */ .nav-item:hover > .dropdown-menu opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; padding: 0.2rem 1rem
.dropdown-menu a:hover background: #f8fafd; color: #1a4972; border-left-color: #2c7da0; padding-left: 1.9rem;
/* special divider style */ .dropdown-divider height: 1px; background: #e4e9f0; margin: 0.5rem 1rem;
/* dropdown menu items */ .dropdown-menu li width: 100%;