css下拉菜单隐藏与显示

下拉菜单在网页设计中经常用到，可以更好地展示网页的内容和提高用户体验。但当下拉菜单很多或者页面布局变化的时候，隐藏掉下拉菜单也是必要的。下面介绍如何使用CSS实现下拉菜单的隐藏和显示。
### HTML代码
首先，我们需要先在HTML中书写下拉菜单的代码。例如：

 <p class="menu">工具箱</p>
    <ul>
        <li>文件夹</li>
        <li>笔记本</li>
        <li>画布</li>
        <li>地址簿</li>
    </ul> 

在这段代码中，“工具箱”是一个可以点击的菜单，下面是一个包含四个选项的下拉菜单。
### CSS代码
下面，我们来实现隐藏和显示。我们使用了CSS中的:hover伪类，让菜单在鼠标悬浮时显示出来。代码如下：

 .menu {
        color: #fff;
        background-color: #6699cc;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 3px;
        cursor: pointer;
    }
<br>
    ul li {
        display: none;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }
<br>
    .menu:hover + ul li {
        display: block;
        background-color: #f5f5f5;
        border-bottom: 1px solid #e0e0e0;
        cursor: pointer;
    } 

首先，我们设置菜单的样式，包括宽高、背景、圆角等属性。接着，我们将下拉菜单的li元素隐藏，设置高和行高，让它们看起来像一个按钮。然后，我们使用+选择器来选中兄弟元素。当鼠标悬浮在菜单上时，我们将下拉菜单的li元素显示出来，添加背景和边框样式以及光标样式。
### 总结
使用CSS来实现下拉菜单的隐藏和显示非常简单，只需要使用:hover伪类和+选择器。在实际使用中，我们可以根据需要调整菜单的样式，使网页更加美观和易于操作。