css下拉菜单显示隐藏

CSS下拉菜单是Web开发中常见的界面元素之一。它可以在鼠标悬停或者点击时显示隐藏，以展示更多的选项。下面介绍如何使用CSS来实现下拉菜单显示和隐藏。

//HTML代码
<div class="menu">
  <div class="menu-btn">菜单</div>
  <ul class="menu-list">
    <li><a href="#">选项一</a></li>
    <li><a href="#">选项二</a></li>
    <li><a href="#">选项三</a></li>
  </ul>
</div>

//CSS代码
.menu {
  position: relative;
}
.menu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
}
.menu-btn:hover + .menu-list,
.menu-btn:focus + .menu-list {
  display: block;
} 

首先，我们使用HTML代码创建了一个包含菜单按钮和菜单选项的div元素。菜单选项使用ul和li元素来进行排列。接着，我们使用CSS来隐藏菜单选项，将它们的display属性设置为none。菜单选项的位置可以通过position和top、left属性进行设置。

为了实现菜单显示和隐藏，我们利用CSS的+选择器，将菜单按钮和菜单选项关联起来。当鼠标悬停或者点击菜单按钮时，菜单选项的display属性被设置为block，从而实现下拉菜单的显示。

CSS下拉菜单是一个简单而实用的界面元素。通过使用CSS的display属性，我们可以在Web页面上轻松实现下拉菜单的显示和隐藏。