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

HTML結構:

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li class="dropdown"><a href="#">產品</a>
<ul class="sub-nav">
<li><a href="#">產品1</a></li>
<li><a href="#">產品2</a></li>
<li><a href="#">產品3</a></li>
</ul>
</li>
<li><a href="#">聯系我們</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列表，并去掉了默認的列表符號，設置背景顏色為#333。
• 每一個導航項的li標簽采用浮動效果。
• a標簽的樣式采用塊級顯示，文本顏色為白色，居中對齊，并設置內邊距（padding），去除下劃線。
• 定義了一個特殊的dropdown類名，表示導航條下方有下拉列表，且該類名導航項采用相對定位（relative）方便后續的絕對定位（absolute）。子標簽ul屬于下拉列表的樣式進行自定義設置，隱藏起來不展示，背景顏色為#f9f9f9。
• 我們在效果中使用了:hover偽類，當鼠標停留在下拉列表導航項上時，就會觸發display:block樣式，將下拉列表展示出來。注意，當鼠標移開dropdown導航項時，下拉列表就又恢復到了display:none的狀態。
• 設置下拉列表中每一個列表項的a標簽的文字顏色為黑色，內邊距為12px，而且文本居左對齊，當鼠標懸停時則改變背景顏色為灰色。