在網(wǎng)頁設計中，按鈕菜單可以是一種很方便的頁面導航方式。而當我們需要將菜單向下級別擴展時，多級菜單可以幫助我們更好地組織信息。那么，如何使用CSS實現(xiàn)按鈕多級菜單呢？

/* 首先，我們需要設置基本的樣式 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #2B2D42;
color: #FFF;
text-decoration: none;
cursor: pointer;
}
/* 隱藏下拉菜單 */
.dropdown {
display: none;
position: absolute;
}
/* 向下三角形圖標 */
.arrow {
width: 0;
height: 0;
margin-left: 10px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #FFF;
}

接下來，我們可以開始編寫HTML代碼，通過嵌套的方式來實現(xiàn)多級菜單。

<div class="menu">
<a href="#" class="btn">菜單1<span class="arrow"></span></a>
<div class="dropdown">
<a href="#" class="btn">子菜單1</a>
<a href="#" class="btn">子菜單2</a>
<div class="dropdown">
<a href="#" class="btn">孫菜單1</a>
<a href="#" class="btn">孫菜單2</a>
</div>
</div>
<a href="#" class="btn">菜單2<span class="arrow"></span></a>
<div class="dropdown">
<a href="#" class="btn">子菜單1</a>
<a href="#" class="btn">子菜單2</a>
</div>
</div>

在CSS中，我們可以使用:hover選擇器來控制按鈕的下拉菜單顯示與隱藏。

/* 鼠標移動到菜單按鈕上時顯示下拉菜單 */
.btn:hover + .dropdown,
.dropdown:hover {
display: block;
}
/* 下拉菜單的位置和背景顏色 */
.dropdown {
top: 40px; /* 距離頂部的距離 */
left: 0;
background-color: #2B2D42;
}
/* 子菜單和孫菜單不顯示向下三角形圖標 */
.dropdown .btn {
margin-left: 0;
}
/* 鼠標移動到菜單按鈕上時，向下三角形圖標變?yōu)橄蛏先切?*/
.btn:hover .arrow {
border-top: 6px solid #FFF;
border-bottom: none;
}

通過上述的CSS代碼，我們可以實現(xiàn)按鈕多級菜單的效果。當鼠標在菜單按鈕上懸停時，其下級菜單會自動向下展開，且同時顯示向下三角形圖標，如果該菜單有下級菜單，顯示向下三角形圖標，否則不顯示。