移動端下拉分類是我們在開發手機端網站或APP時必然會用到的一個功能。如何用簡單易懂的CSS代碼實現這個功能，下面我們來介紹一下。

/* 首先我們需要定義一個容器作為下拉菜單的外框 */
.dropdown {
position: relative;
display: inline-block;
}
/* 定義下拉菜單的樣式 */
.dropdown-content {
display: none; /* 默認下拉菜單是不可見的 */
position: absolute;
z-index: 1; /* 使下拉菜單在其他內容之上 */
}
/* 當鼠標移動到下拉菜單容器上時，使下拉菜單可見 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 定義下拉菜單中每個選項的樣式 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block; /* 將鏈接轉換為塊級元素 */
}
/* 鼠標移動到下拉菜單中的選項上時的樣式 */
.dropdown-content a:hover {
background-color: #f1f1f1;
}

代碼解釋:

首先我們定義一個容器作為下拉菜單的外框，通過設置relative屬性來保證下拉菜單是相對于容器定位的。我們的下拉列表內容實際上是一個普通的div元素，我們給它設置一個絕對定位的位置屬性，并將其z-index屬性設置為1，這樣就可以確保下拉菜單總在其他內容之上。接著，我們將下拉列表的display屬性設置為none，使其初始時不可見。在下拉菜單容器上hover事件觸發時，我們將其下拉菜單div內的display屬性設置為block表示顯示，從而實現下拉菜單的顯示。我們定義下拉菜單中每個選項的樣式，在下拉菜單內的a元素上設置padding、text-decoration、display屬性等樣式，并且在鼠標懸停這些選項時，通過hover事件調整背景色。