Header dropdown menu HTML & CSS

This code creates a basic header dropdown menu using an unordered list for the main navigation items and a nested div for the dropdown content. The CSS styles the header, the navigation, and the dropdown, making the dropdown content appear only when the user hovers over the "Services" link.

HTML Code:

<nav>

<ul>

<li><a href="#">About</a></li>

<a href="#">Services <i class="fa fa-caret-down"></i></a>

<a href="#">Service 1</a>

<a href="#">Service 2</a>

<a href="#">Service 3</a>

</div>

</li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

CSS Code:

.header {

background-color: #333;

color: #fff;

text-align: center;

}

.header nav ul {

display: flex;

justify-content: space-between;

padding: 0;

margin: 0;

}

.header nav ul li {

list-style: none;

float: left;

}

.header nav a {

display: block;

padding: 15px;

color: #fff;

text-decoration: none;

}

.dropdown {

position: relative;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown:hover .dropdown-content {

display: block;

}