Author: | Idanref |
---|---|
Views Total: | 597 views |
Official Page: | Go to website |
Last Update: | October 8, 2021 |
License: | MIT |
Preview:

Description:
A CSS only, fully responsive dropdown navigation that reveals sub-menu items on hover (desktop) or tap (tablet & mobile).
How to use it:
1. Create a nav list for the dropdown navigation. Note that this example uses Font Awesome for the dropdown icon.
<nav id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> Services <i class="fas fa-angle-down"></i> <ul> <li><a href="#">Web Development</a></li> <li><a href="#">Website Design</a></li> <li><a href="#">Mobile Development</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li> Blog <i class="fas fa-angle-down"></i> <ul> <li><a href="#">HTML</a> <span>22 Posts</span></li> <li><a href="#">CSS</a> <span>16 Posts</span></li> <li><a href="#">JavaScript</a> <span>10 Posts</span></li> <li><a href="#">Python</a> <span>13 Posts</span></li> <li><a href="#">PHP</a> <span>10 Posts</span></li> <li><a href="#">Design</a> <span>21 Posts</span></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav>
2. The main CSS styles for the dropdown navigation.
:root { --primary-color: #344a72; --secondary-color: chocolate; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background-color: #f4f4f4; font-family: Arial, Helvetica, sans-serif; background-color: #f8f8f8; } #navbar ul { list-style: none; } #navbar ul li { color: #333; display: inline-block; padding: 1rem; position: relative; } #navbar ul li a { color: #333; text-decoration: none; } /* Hide Nested ul By Default */ #navbar ul li ul { display: none; } #navbar ul li:hover { cursor: pointer; background: var(--primary-color); color: #fff; } #navbar ul li:hover a { color: #fff; } /* Nested Dropdown Show */ #navbar ul li:hover ul { display: block; position: absolute; left: 0; width: 200px; margin-top: 1rem; } #navbar ul li:hover ul li { display: block; background: #e7e7e7; } #navbar ul li:hover ul li a { color: #333; } #navbar ul li:hover ul li:hover { background: #e0e0e0; color: inherit; } #navbar ul li:hover ul li span { float: right; color: #fff; background: var(--primary-color); padding: 0.2rem 0.5rem; text-align: center; font-size: 0.8rem; border-radius: 5px; } #navbar ul li:hover ul li:hover span { background: var(--secondary-color); } #navbar ul li:first-child { background-color: var(--primary-color); } #navbar ul li:first-child a { color: #fff; }
3. Make it fully responsive using CSS media queries.
@media (max-width: 600px) { #navbar ul li { display: block; } #navbar ul li:hover ul { width: 100%; position: relative; } }