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

/* HTML代碼 */
<div class="dropdown">
<span class="dropbtn">下拉菜單</span>
<div class="dropdown-content">
<a href="#">菜單項1</a>
<a href="#">菜單項2</a>
<a href="#">菜單項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;
}

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

在:hover選擇器中，我們定義當鼠標懸停在dropdown容器上時，dropdown-content容器的display屬性被設置為block，即展開菜單項，實現下拉菜單效果。

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