CSS中的導航欄下拉單是一個很常見的元素，它可以讓用戶更方便地瀏覽網站內的不同內容。下面我們就來看一下如何使用CSS來實現導航欄下拉單。

/* HTML代碼 */
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">產品</a>
<div class="dropdown-content">
<a href="#">產品1</a>
<a href="#">產品2</a>
<a href="#">產品3</a>
</div>
</li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>
/* CSS代碼 */
/* 隱藏下拉單 */
.dropdown-content {
display: none;
}
/* 鼠標懸停時顯示下拉單 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 下拉單樣式 */
.dropdown-content a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
background-color: #f1f1f1;
}
/* 鼠標懸停時下拉單鏈接樣式 */
.dropdown-content a:hover {
background-color: #ddd;
}

上面的代碼中，我們先將下拉單隱藏起來。然后在鼠標懸停在“產品”這個鏈接上時，我們將下拉單的display屬性設為block，從而讓它顯示出來。下拉單的樣式可以根據需求進行調整，這里我們為每個鏈接設置了一些基本樣式。在鼠標懸停在下拉單鏈接上時，我們為它們設定了一個不同的背景顏色，讓它們更加醒目。

使用CSS來實現導航欄下拉單并不難，只需一些基本的CSS樣式即可實現。如果您對CSS比較熟悉，您還可以根據自己的需求進行更多的調整，并且使您的網站更加美觀和易于使用。