今天我们来学习一下如何使用 CSS 制作下拉菜单吧！下面是一份 CSS 下拉菜单教程视频的代码示例：
<!DOCTYPE html>
<html>
<head>
<title>CSS Dropdown Menu</title>
<style>
/* 所有下拉菜单的样式 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉菜单的按钮样式 */
.dropdown-btn {
background-color: #2d2d2d;
color: white;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
/* 下拉菜单内容样式 */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 4px;
padding: 12px 16px;
}
/* 显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<!-- 创建下拉菜单 -->
<div class="dropdown">
<button class="dropdown-btn">Hover me!</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
</body>
</html>
上面的代码基本上解决了创建下拉菜单的所有步骤。首先，我们创建一个 `dropdown` 类，然后在其中添加一个 `button` 元素，这是下拉菜单的按钮。接下来，在 `dropdown` 类中创建一个 `dropdown-content` 类，该类用于在按钮上方显示菜单项。最后，我们使用悬停效果从 `dropdown` 类中显示该 `dropdown-content` 类。
CSS 下拉菜单可以让网站的菜单更加整洁，同时也方便主导航栏和子菜单以及层次式导航的开发。这样，我们就可以实现具有可自定义菜单项的网站！
文章说明:
本文原创发布于探乎站长论坛，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。
