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来实现在鼠标悬浮时自动展开下拉栏。到这里，一个简单的点击出现下拉栏的应用就做好了。