CSS是前端開發中非常重要的技術之一，它可以用來實現網頁的樣式和布局。其中，實現橫向導航是我們常見的需求之一，下面我們來介紹一下如何使用CSS實現橫向導航。

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
.nav {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
.nav li {
float: left;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav li a:hover {
background-color: #111;
}

以上是一個基本的HTML代碼和CSS樣式，我們來解析一下：

HTML部分，我們使用<ul>和<li>標簽來創建一個無序列表，將導航條的每個選項放到一個<li>中，并且使用<a>來實現超鏈接。將所有選項放到一個<ul>中。

CSS部分，我們對整個<ul>和每個<li>都設置了一些基本樣式，去除了默認的列表樣式，將背景色設置為深色的灰色，并且將溢出部分隱藏起來。然后，我們給所有的<li>設置了float:left;屬性，使得它們橫向浮動在一起。同時，我們也設置了每個<a>的樣式，將它們設置為塊級元素（display:block;），設置了字體樣式和文字居中、填充等其他樣式。最后，我們使用:hover選擇器將選項變為深色背景，當鼠標懸浮在某個選項上時，它的背景色會變為黑色。

通過以上html和css的編寫，我們成功實現了一個簡單的橫向導航，為了能夠更好的適應各種屏幕尺寸，需要善于使用@media查詢等技術來實現響應式設計。