CSS是前端開發必不可少的重要技術之一，其中下拉欄的應用也很常見。下面就介紹一下如何用CSS實現點擊出現下拉欄的效果。

/* HTML部分 */
<div class="dropdown">
<button class="dropbtn">點擊下拉</button>
<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;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 10px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}

首先，我們在HTML中添加一個div元素并設置類名為dropdown。其中，按鈕使用button標簽，類名為dropbtn；下拉欄內容使用div元素，類名為dropdown-content。在CSS中，我們給定了相應的樣式屬性，包括下拉欄的定位、背景色、顏色、字體大小、邊框、光標樣式等。在下拉欄的a標簽中，我們設置了顏色、內邊距、文本裝飾和塊級元素元素化屬性。最后，我們通過:hover偽類將下拉欄內容的display屬性設置為block來實現在鼠標懸浮時自動展開下拉欄。到這里，一個簡單的點擊出現下拉欄的應用就做好了。