CSS 的分類右拉是一種常見的頁面布局方式。它可以幫助我們在頁面中展示多種分類，讓用戶更加方便地進行查找和篩選。下面我們來了解一下使用 CSS 如何實現分類右拉效果。

/* 定義分類選項的樣式，包括寬度和高度、背景色與字體顏色、邊框和圓角 */
.category {
width: 120px;
height: 30px;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
border-radius: 3px;
padding-left: 10px;
line-height: 30px;
cursor: pointer;
}
/* 定義分類選項的下拉列表樣式，包括寬度和高度、背景顏色、邊框和圓角、以及列表項的樣式 */
.category-dropdown {
width: 120px;
height: 150px;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 3px 3px;
padding: 10px;
overflow-y: auto;
z-index: 999;
}
.category-item {
width: 100%;
height: 30px;
line-height: 30px;
cursor: pointer;
}
/* 定義鼠標懸停和點擊分類選項時的樣式變化 */
.category:hover,
.category.active {
background-color: #ccc;
color: #fff;
}
.category.active + .category-dropdown {
display: block;
}

以上代碼中，我們定義了兩個類：category 和 category-dropdown。Category 類是指分類選項本身，包含了分類名稱和下拉列表。Category-dropdown 類是指下拉列表本身，包含了分類選項的所有子項。我們通過對這兩個類的樣式定義實現了分類右拉的效果。

具體來說，我們將分類選項的下拉列表設置為默認隱藏狀態，只有當用戶點擊分類選項時才會顯示。我們使用了相鄰選擇器（+）實現了這個效果。即當用戶點擊分類選項時，下一個元素（即下拉列表）會顯示出來。同時，我們還定義了分類選項和下拉列表的樣式，包括寬度和高度、背景色和字體顏色、邊框和圓角等。我們還使用了:hover 和 .active 兩個偽類選擇器，讓分類選項在鼠標懸停和點擊時顏色發生變化。

總的來說，分類右拉是一種很實用的頁面布局方式，可以幫助我們實現多分類查找和篩選。掌握 CSS 的分類右拉技巧，有助于我們打造更加靈活、易用的網站和應用。