CSS導航欄是網站制作中常見的一種基本元素，它為用戶提供了方便的頁面導航功能和更好的用戶體驗。下面將介紹如何利用CSS和HTML代碼來制作一個簡單的導航欄。

<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a>
<ul>
<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>
<li><a href="#">聯系我們</a></li>
</ul>

代碼中使用了<ul>和<li>標簽，表示無序列表和列表項。列表項中嵌套網站頁面的鏈接。而子菜單則是使用的嵌套的<ul>標簽。

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
}
li:hover ul {
display: block;
}
a {
display: block;
padding: 10px;
color: #FFF;
background-color: #333;
text-decoration: none;
}
li:hover > a {
background-color: #00BFFF;
}

在CSS代碼中，使用了選擇器來對相應的HTML標簽進行樣式設置。其中任一ul元素的樣式都被設成了list-style:none、margin:0和padding: 0。為了讓瀏覽器不再缺省樣式渲染，字段被保留了。

對于li元素，采用float屬性來使得菜單項水平排列。子菜單的顯示設置成了absolute定位，并且在父元素上面。li:hover ul屬性使子菜單在菜單項被選中的時候顯示，而<a>元素的背景在鼠標放上時設置為亮藍色。