CSS下拉菜單是網站設計的一個重要元素，它可以提升用戶體驗和頁面美觀度。下面介紹如何使用CSS來顯示和隱藏下拉菜單。

//html代碼
<ul class="dropdown">
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
<li>菜單4
<ul class="sub-menu">
<li>子菜單1</li>
<li>子菜單2</li>
<li>子菜單3</li>
</ul>
</li>
</ul>
//CSS代碼
.dropdown {
position: relative;
}
.dropdown .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.dropdown:hover .sub-menu {
display: block;
}

首先，在HTML代碼中創建一個ul列表，并在其中包含要顯示的菜單項和子菜單項。下面的CSS代碼控制下拉菜單和子菜單的顯示：

//CSS代碼
.dropdown {
position: relative;
}
.dropdown .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.dropdown:hover .sub-menu {
display: block;
}

在這個樣式中，下拉菜單被定位為相對定位，而子菜單被定位為絕對定位。子菜單的顯示狀態設置為none，也就是不顯示，因為它們只有當用戶在下拉菜單上懸停時才需要顯示。

當用戶將鼠標懸停在下拉菜單上時，CSS代碼將啟用:hover偽類，并顯示子菜單：

.dropdown:hover .sub-menu {
display: block;
}

這個樣式告訴瀏覽器當用戶在.dropdown上懸停時，將顯示.sub-menu下的所有元素（即子菜單項）。

通過這些CSS代碼，我們可以輕松控制下拉菜單的顯示和隱藏，提高用戶體驗和頁面美觀度。