CSS3 手風(fēng)琴下拉菜單是一種常用的設(shè)計(jì)樣式，可以為網(wǎng)頁增添獨(dú)特的視覺效果。其原理就是在鼠標(biāo)或用戶操作時(shí)，通過 CSS3 的 transition 和 transform 屬性實(shí)現(xiàn)內(nèi)容展開或收縮。

<!-- HTML 結(jié)構(gòu) -->
<div class="accordion-menu">
<ul>
<li>
<a href="#">一級(jí)標(biāo)題1</a>
<ul>
<li><a href="#">二級(jí)標(biāo)題1</a></li>
<li><a href="#">二級(jí)標(biāo)題2</a></li>
<li><a href="#">二級(jí)標(biāo)題3</a></li>
</ul>
</li>
<li>
<a href="#">一級(jí)標(biāo)題2</a>
<ul>
<li><a href="#">二級(jí)標(biāo)題1</a></li>
<li><a href="#">二級(jí)標(biāo)題2</a></li>
<li><a href="#">二級(jí)標(biāo)題3</a></li>
</ul>
</li>
<li>
<a href="#">一級(jí)標(biāo)題3</a>
<ul>
<li><a href="#">二級(jí)標(biāo)題1</a></li>
<li><a href="#">二級(jí)標(biāo)題2</a></li>
<li><a href="#">二級(jí)標(biāo)題3</a></li>
</ul>
</li>
</ul>
</div>

以上是 HTML 結(jié)構(gòu)，接下來是 CSS 代碼：

.accordion-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.accordion-menu li {
background-color: #f7f7f7;
border-bottom: 1px solid #e7e7e7;
position: relative;
}
.accordion-menu a {
color: #333;
display: block;
font-size: 16px;
font-weight: bold;
padding: 15px 20px;
text-decoration: none;
}
.accordion-menu li ul {
border-top: none;
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.5s ease-in-out;
}
.accordion-menu li:hover ul {
max-height: 1000px;
}
.accordion-menu li:hover {
background-color: #f1f1f1;
}

在 CSS 代碼中，我們?yōu)橐患?jí)標(biāo)題和二級(jí)標(biāo)題設(shè)置了默認(rèn)樣式，其次是設(shè)置下拉菜單的樣式，將菜單高度設(shè)為 0 并使用 overflow: hidden; 來隱藏內(nèi)容，同時(shí)設(shè)置了 transition: max-height 0.5s ease-in-out; 來控制菜單的展開和收縮動(dòng)畫。當(dāng)鼠標(biāo)移動(dòng)到菜單上方時(shí)，通過 li:hover 選擇器來觸發(fā)菜單的展開和一級(jí)標(biāo)題的樣式變化。

最后，我們?cè)?JavaScript 中使用了 jQuery 的 slideUp() 和 slideDown() 方法，控制菜單的展開和隱藏。具體實(shí)現(xiàn)請(qǐng)見下方代碼：

$(document).ready(function(){
$('.accordion-menu li').click(function(){
$(this).siblings().children('ul').slideUp();
$(this).children('ul').slideToggle();
});
});

至此，CSS3 手風(fēng)琴下拉菜單就完成了，希望本文對(duì)大家有所幫助。