-
Dropdown Navigation Menu
HTML
CSS
JavaScript
Home
Services ▾
Web Design
Branding
Marketing
Portfolio
Contact
* { margin: 0; padding: 0; box-sizing: border-box; } nav { background: #4759e4; padding: 15px; } nav ul { display: flex; list-style: none; } nav ul li { position: relative; } nav ul li a { color: #fff; text-decoration: none; padding: 12px 20px; display: block; } nav ul li:hover { background: #333; } nav ul li ul { position: absolute; top: 40px; left: 0; background: #333; display: none; list-style: none; min-width: 150px; } nav ul li:hover ul { display: block; } nav ul li ul li a:hover { background: #444; }
Live Preview