隨著網(wǎng)站頁面越來越復(fù)雜，導(dǎo)航欄的作用也越來越重要。除了傳統(tǒng)的導(dǎo)航方式，下拉列表也成為了一種常見的設(shè)計方式。

/* CSS 代碼 */
/* 定義導(dǎo)航欄 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px 20px;
}
/* 定義導(dǎo)航項 */
.nav-item {
position: relative;
cursor: pointer;
}
/* 定義下拉菜單 */
.dropdown-menu {
position: absolute;
display: none;
top: 100%;
left: 0;
min-width: 200px;
padding: 10px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
/* 當(dāng)鼠標(biāo)懸停在導(dǎo)航項上時，顯示下拉菜單 */
.nav-item:hover .dropdown-menu {
display: block;
}
/* 定義下拉菜單項 */
.dropdown-menu-item {
margin-bottom: 10px; /* 項之間留一定的空隙 */
}

在代碼中，我們使用了 position 屬性來使下拉菜單固定在導(dǎo)航欄下方。通過 hover 事件來控制下拉菜單的顯示和隱藏。

下拉菜單通常用于展示一些和導(dǎo)航欄主題相似的內(nèi)容，比如各個分類的具體內(nèi)容。在具體實現(xiàn)時，可以根據(jù)需求進行修改，達到更好的效果。