下拉菜單是Web前端中非常常見的一個交互方式，通過CSS樣式可以很簡單地實現下拉菜單。下面我們來看看如何實現一個簡單的下拉菜單。

<!--HTML代碼-->
<div class="dropdown">
<button class="dropbtn">下拉菜單</button>
<ul class="dropdown-content">
<li><a href="#">菜單項1</a></li>
<li><a href="#">菜單項2</a></li>
<li><a href="#">菜單項3</a></li>
</ul>
</div>
<!--CSS代碼-->
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border: none;
}
.dropdown-content li {
padding: 10px;
}
.dropdown-content li a {
color: black;
text-decoration: none;
}
.dropdown-content li:hover {
background-color: #f1f1f1;
}

通過CSS代碼中的hover偽類選擇器，當鼠標懸停在下拉菜單按鈕上時，菜單項的顯示方式改為塊級元素，從而實現了下拉菜單的效果。