CSS Only Responsive Dropdown Navigation

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;
  }
}