Html Css — Dropdown Menu Codepen

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

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

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

/* 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); .dropdown-menu a:hover background: #f8fafd

/* show dropdown on hover */ .nav-item:hover > .dropdown-menu opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;

<!-- 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

<!-- small note: additional style to improve submenu on leftmost edge (but works fine) --> </body> </html>

/* adjust submenu arrow */ .submenu-arrow margin-left: auto; font-size: 0.7rem; transition: transform 0.2s;