基础 CSS 下拉菜单

下拉菜单是经常在网站和应用中使用的一个用户界面组件。使用基础 CSS 可以轻松地创建一个下拉菜单，本文将为程序员详细介绍如何使用基础 CSS 创建下拉菜单。

HTML 结构

HTML 结构是创建下拉菜单的第一步。需要一个包含菜单选项的 <ul> 列表，每个选项都需要一个 <li>，并且需要添加一个包含下拉菜单的容器。

<div class="dropdown">
  <button class="dropdown-btn">下拉菜单</button>
  <ul class="dropdown-menu">
    <li><a href="#">选项 1</a></li>
    <li><a href="#">选项 2</a></li>
    <li><a href="#">选项 3</a></li>
  </ul>
</div>

CSS 样式

使用 CSS 可以创建一个简单的下拉菜单。下面的样式为包含下拉菜单的容器设置了 position: relative，并将菜单设置为 display: none（隐藏）。

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

接下来，为下拉菜单添加一些交互效果。通过将鼠标悬停在包含下拉菜单的容器上，显示下拉菜单，并使用 transform: translateY 将其垂直移动。

.dropdown:hover .dropdown-menu {
  display: block;
  transform: translateY(0);
}

最后，为下拉菜单中的选项添加样式，以使其看起来更美观和易于使用。

.dropdown-menu li {
  padding: .5rem;
}

.dropdown-menu li:hover {
  background-color: #f1f1f1;
}

.dropdown-menu a {
  display: block;
  padding: .5rem 1rem;
  color: #333;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1;
}

样式最终的效果如下所示：

结论

这就是使用基础 CSS 创建下拉菜单的过程。根据自己的需求和风格，可以调整样式和交互效果，创建出独具特色的下拉菜单。