css target做下拉菜单

CSS target可以用来实现很多常见的交互效果。下面我们以一个下拉菜单为例来演示如何使用CSS target。

首先，我们需要在HTML文档中添加一个包含选项的列表。为了实现下拉菜单的效果，我们需要使用CSS将该列表隐藏，然后使用target选择器在用户点击菜单时进行显示。

• Option 1
• Option 2
• Option 3

现在，我们可以使用CSS将下拉菜单列表隐藏，并根据target选择器来显示选择器所对应的项目。

.dropdown-menu {
  display: none;
}
.dropdown-menu:target {
  display: block;
}

在这个CSS代码中，我们使用了display:none将下拉菜单列表隐藏，而在使用target选择器时将其显示出来。target选择器的效果是，当用户点击链接时，浏览器会将页面滚动到目标位置，并使用:target选择器将目标元素设置为激活状态。

在这里，使用:target选择器，如果当前URL中带有目标元素的ID名称（例如，URL上的#option1），则目标元素就会显示出来。否则，该元素将保持隐藏状态。

现在，我们已经创建了一个基本的下拉菜单。你可以继续使用CSS和JavaScript来改善该菜单的交互和设计。