CSS下拉式菜單是網站設計中經常使用的一種功能，它可以提供用戶更方便的瀏覽體驗。下面我們來講一下如何使用CSS實現下拉式菜單。

/* 清除默認樣式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 基礎樣式 */
li {
position: relative;
display: inline-block;
padding: 10px;
cursor: pointer;
}
li:hover {
background-color: #ccc;
}
/* 子菜單樣式 */
.sub-menu {
position: absolute;
display: none;
width: 150px;
background-color: #fff;
z-index: 1;
}
.sub-menu li {
display: block;
padding: 8px;
}
/* 鼠標懸停顯示子菜單 */
li:hover .sub-menu {
display: block;
}

上面的代碼首先清除了默認樣式，確保樣式的統一性。然后是基礎的菜單樣式，包括菜單項的位置、顯示方式、鼠標指針、懸停效果等。接下來是子菜單的樣式，它的位置是絕對定位，菜單項的顯示方式設置為塊級元素，方便排列布局。最后，通過鼠標懸停事件來控制子菜單的顯示與隱藏。

實際應用中，我們只需要在HTML中添加相應的代碼，定義菜單和子菜單的結構和內容即可。下面是一個簡單的示例：

<ul>
<li>菜單一
<ul class="sub-menu">
<li>子菜單一</li>
<li>子菜單二</li>
<li>子菜單三</li>
</ul>
</li>
<li>菜單二
<ul class="sub-menu">
<li>子菜單四</li>
<li>子菜單五</li>
<li>子菜單六</li>
</ul>
</li>
<li>菜單三</li>
</ul>

在實際使用的過程中，可以根據需要修改樣式和HTML結構，實現不同的下拉式菜單效果。