css下拉菜单显示

下拉菜单是网页中经常用到的功能之一，它能够使用户方便地浏览网站提供的选项。在CSS中，我们可以使用:hover 伪类来使菜单在鼠标悬停时显现出来。

html代码：
<div class="dropdown">
  <a href="#" class="dropbtn">菜单</a>
  <div class="dropdown-content">
     <a href="#">选项1</a>
     <a href="#">选项2</a>
     <a href="#">选项3</a>
  </div>
</div>

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

在上述代码中，我们首先设置了一个.container元素来包含该菜单。我们还设置了一个.dropbtn链接按钮作为菜单的标识符。随后，在.dropdown类中，我们通过将position属性设置为relative来创建相对定位的元素，并通过display：inline-block属性来将该元素提供给其他元素访问。

然后在.dropdown-content类中，我们设置了一个display：none的属性，以便默认情况下不显示。我们还将该元素的位置设置为绝对定位，并将层级设置为1，以便将其置于其他元素之上。

最后，在:hover伪类中，我们通过将.display属性设置为block来使下拉菜单在鼠标悬停时出现。这将使菜单显示在链接下面，并允许用户选择其选项。

总的来说，使用CSS下拉菜单是一个非常简单的过程，只需要将HTML和CSS分别设置好即可。只需记住，在:hover伪类中设置display属性，以便使菜单在鼠标悬停时显现出来即可。