在前端開發(fā)中，下拉菜單是非常常用的一個(gè)組件。我們可以使用JavaScript來實(shí)現(xiàn)下拉菜單，但是使用純CSS實(shí)現(xiàn)可以讓我們的代碼更加簡潔，同時(shí)保證網(wǎng)頁的性能。CSS層下拉文字層（CSS Layered Dropdown Text Layer）是一種實(shí)現(xiàn)下拉菜單的方法之一。

/* HTML代碼 */
<div class="dropdown">
<span class="dropbtn">下拉菜單</span>
<div class="dropdown-content">
<a href="#">菜單項(xiàng)1</a>
<a href="#">菜單項(xiàng)2</a>
<a href="#">菜單項(xiàng)3</a>
</div>
</div>
/* CSS代碼 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

在上面的代碼中，我們首先定義了一個(gè)下拉菜單容器（dropdown），并設(shè)置它的position為relative。我們還定義了一個(gè)下拉菜單內(nèi)容容器（dropdown-content），并將其display屬性設(shè)置為none，使其在一開始不可見。container 定位到下方，并使用 z-index 將其放在上方。

在:hover選擇器中，我們定義當(dāng)鼠標(biāo)懸停在dropdown容器上時(shí)，dropdown-content容器的display屬性被設(shè)置為block，即展開菜單項(xiàng)，實(shí)現(xiàn)下拉菜單效果。

需要注意的是，這個(gè)方法只適用于單層下拉菜單，如果需要多層次的下拉菜單，需要使用其他方式，如使用JavaScript或CSS偽元素等。