CSS導航下拉菜單是一個常見的UI組件，它通常用于網站的主導航欄，當用戶將鼠標懸停在菜單項上時，會彈出一個下拉子菜單。下面我們來看一下如何實現(xiàn)這個功能。

/*
 CSS樣式表
*/
nav {
background-color: #f2f2f2;
font-size: 18px;
font-weight: bold;
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a {
color: #333;
display: block;
text-decoration: none;
padding: 10px;
}
nav ul li ul {
position: absolute;
left: 0;
top: 50px;
z-index: 1;
background-color: #f2f2f2;
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 100%;
}
nav ul li ul li a {
padding: 10px 20px;
}
nav ul li ul li:hover {
background-color: #ddd;
}

首先，我們需要創(chuàng)建一個HTML導航欄，可以使用<nav>和<ul>標簽來實現(xiàn)：

然后，在CSS中為導航欄添加樣式。當用戶將鼠標懸停在某個菜單項上時，我們需要將其下方的子菜單顯示出來，可以使用:hover偽類來實現(xiàn)。子菜單需要添加position: absolute屬性，以便將它們放置在父菜單項下方。

在代碼中，我們還添加了一些樣式來設置導航欄樣式、菜單項樣式和子菜單樣式。

最后，在菜單項上添加子菜單。由于子菜單是使用絕對定位放置的，因此還需要設置寬度等樣式。

這樣，你就可以使用CSS來創(chuàng)建一個擁有下拉菜單的導航欄了。