-
Dropdown Navigation Menu
HTML
CSS
JavaScript
<nav> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Services ▾</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Branding</a></li> <li><a href="#">Marketing</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
* { 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
- Dropdown Navigation Menu