使用 CSS 创建的头部下拉列表是网页中经常使用的一种元素，能够给用户提供更多的信息和选项。这篇文章将介绍如何使用 CSS 创建一个简单的头部下拉列表。 首先，我们需要创建一个基础的 HTML 结构。这个结构由一个顶部导航栏和一个下拉列表组成。导航栏中包含了一些基本的链接和按钮。下面是基础 HTML 代码：

<nav class="topnav">
<a class="active" href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<div class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#" class="icon">☰</a>
</nav>

现在，我们来添加 CSS 样式。首先，导航栏应该具有一个固定的位置，不随滚动条滚动。可以通过设置 position: fixed; 和 top: 0; 来实现。

.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

下拉菜单应该在点击时显示，并且在鼠标离开菜单时隐藏。可以使用 display: none; 和 display: block; 来控制下拉菜单的显示和隐藏。

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

此外，下拉按钮也应该在鼠标悬停时改变样式，以指示菜单已经被点击。为此，可以使用:hover 伪类。

.dropbtn:hover {
background-color: #555;
}

完整的 CSS 代码如下：

.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover {
background-color: #555;
}

现在，当用户点击下拉菜单按钮时，下拉列表将会展开，用户可以看到更多选项。这个简单的例子可以帮助我们理解如何使用 CSS 来创建头部下拉菜单。