[分享]css3手风琴下拉菜单

CSS3手风琴下拉菜单是一种非常常见和常用的Web开发技术。它可以在不使用JavaScript的情况下，实现菜单栏的折叠和展开功能。下面我们来介绍一下如何使用CSS3手风琴下拉菜单。/CSS代码/ ....

CSS3手风琴下拉菜单是一种非常常见和常用的Web开发技术。它可以在不使用JavaScript的情况下，实现菜单栏的折叠和展开功能。下面我们来介绍一下如何使用CSS3手风琴下拉菜单。

/*CSS代码*/
.accordion{
    width: 100%;
    overflow: hidden;
}
.accordion .accordion-item{
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.accordion .accordion-item-title{
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.accordion .accordion-item-title:hover{
    background-color: #ddd;
}
.accordion .accordion-item-content{
    display: none;
    padding: 12px 24px;
    border-top: 1px solid #ddd;
    position: relative;
}
.accordion .accordion-item.active .accordion-item-content{
    display: block;
} 

上述代码就是实现CSS3手风琴下拉菜单的关键。其中，我们通过设置display:none属性来使菜单的默认状态为折叠。然后，在给菜单设置标题和内容时，我们需要给每个标题和内容的父元素设置一个class名称.accordion-item。这样，我们在下面的CSS代码中就可以通过.accordion .accordion-item来统一控制整个菜单的样式。

接下来，我们需要利用伪类来设置菜单的展开状态。这里我们使用了:hover来实现鼠标悬停时的样式效果，以及.accordion-item.active .accordion-item-content来实现当前菜单展开时的样式效果。

最后，将上述CSS代码应用于HTML页面中，我们就可以得到一个美观实用的CSS3手风琴下拉菜单了。