導(dǎo)航條是網(wǎng)站界面設(shè)計中不可或缺的一部分，而CSS是美化網(wǎng)頁的重要工具之一。CSS導(dǎo)航條下拉效果是很常見的，以下是一份CSS代碼示例：

HTML結(jié)構(gòu):

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li class="dropdown"><a href="#">產(chǎn)品</a>
<ul class="sub-nav">
<li><a href="#">產(chǎn)品1</a></li>
<li><a href="#">產(chǎn)品2</a></li>
<li><a href="#">產(chǎn)品3</a></li>
</ul>
</li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>

CSS樣式:

.nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
.nav li {
float: left;
}
.nav li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown:hover .sub-nav {
display: block;
}
.sub-nav {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.sub-nav li a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.sub-nav li a:hover {
background-color: #ddd;
}

代碼解析:

• 首先，我們定義了一個ul列表，并去掉了默認(rèn)的列表符號，設(shè)置背景顏色為#333。
• 每一個導(dǎo)航項(xiàng)的li標(biāo)簽采用浮動效果。
• a標(biāo)簽的樣式采用塊級顯示，文本顏色為白色，居中對齊，并設(shè)置內(nèi)邊距（padding），去除下劃線。
• 定義了一個特殊的dropdown類名，表示導(dǎo)航條下方有下拉列表，且該類名導(dǎo)航項(xiàng)采用相對定位（relative）方便后續(xù)的絕對定位（absolute）。子標(biāo)簽ul屬于下拉列表的樣式進(jìn)行自定義設(shè)置，隱藏起來不展示，背景顏色為#f9f9f9。
• 我們在效果中使用了:hover偽類，當(dāng)鼠標(biāo)停留在下拉列表導(dǎo)航項(xiàng)上時，就會觸發(fā)display:block樣式，將下拉列表展示出來。注意，當(dāng)鼠標(biāo)移開dropdown導(dǎo)航項(xiàng)時，下拉列表就又恢復(fù)到了display:none的狀態(tài)。
• 設(shè)置下拉列表中每一個列表項(xiàng)的a標(biāo)簽的文字顏色為黑色，內(nèi)邊距為12px，而且文本居左對齊，當(dāng)鼠標(biāo)懸停時則改變背景顏色為灰色。