導航欄作為網站的重要組成部分，如果樣式設計不好，將會影響用戶體驗。因此，我們需要使用CSS代碼來美化導航欄。下面我們將使用下劃線為例，詳細講解如何使用CSS代碼實現。 首先，我們需要一個基本的導航欄HTML結構，如下所示：

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
</ul>
</nav>

其中，nav為導航欄的父元素，ul為子元素，li是每個導航項，a標簽則是導航鏈接。下面是具體的CSS樣式：

nav {
background-color: #333;
height: 50px;
font-size: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: inline-block;
padding: 0 20px;
height: 50px;
line-height: 50px;
color: #fff;
text-decoration: none;
}
a:hover {
border-bottom: 2px solid #fff;
}

讓我們來逐一解釋每個CSS屬性的作用。首先，我們為導航欄父元素nav設置了背景色、高度和字體大小為0。這里字體大小為0是因為在li和a標簽中都有font-size屬性，為了避免出現問題，設置字體大小為0。 接著，我們對子元素ul進行了初始化，取消了默認的margin、padding和list-style。這里將list-style設為none是為了去掉li標簽的圓點標記。 對li元素，我們將其設為行內塊元素，這樣每個導航項都能夠水平排列。對a元素，除了一般的樣式，我們還將它的line-height屬性設為nav的高度50px，讓導航項居中顯示。 最后，我們使用a:hover偽類為鼠標滑過鏈接時添加下劃線。這里我們采用了border-bottom屬性，將下邊框加粗為2px，顏色為白色。 通過這些CSS樣式，我們實現了導航欄的下劃線效果。當然，如果我們需要更多的樣式效果，也可以在這個基礎上進行修改和拓展。