<!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;
<!-- 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> html css dropdown menu codepen
/* adjust submenu arrow */ .submenu-arrow margin-left: auto; font-size: 0.7rem; transition: transform 0.2s; meta name="viewport" content="width=device-width
.dropdown-submenu:hover .submenu-arrow transform: translateX(3px); Elegant Dropdown Menu | Pure HTML/CSS<
/* show dropdown on hover */ .nav-item:hover > .dropdown-menu opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
.dropdown-menu a:hover background: #f8fafd; color: #1a4972; border-left-color: #2c7da0; padding-left: 1.9rem;