CSS是一種很重要的網頁設計語言，可以用來控制網頁中的各種元素的樣式和布局。有時候，我們需要還原一個傳統的橫向導航菜單，這個時候就可以使用CSS來實現。

首先，我們需要使用HTML來定義我們的導航菜單，這需要使用到一個無序列表（ul）和若干個列表項（li）：

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

接下來，我們需要使用CSS來控制這些菜單項的樣式。為了實現橫向導航菜單，我們需要將列表項的顯示方式設置為inline-block，并設置一些padding和margin值，使得它們之間有一定的間距和樣式。同時，我們也需要對列表項上的鏈接進行一些樣式調整，比如去除下劃線并設置一定的顏色等：

.nav {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav li {
display: inline-block;
margin-right: 10px;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}
.nav li a {
text-decoration: none;
color: #333;
}

最后，我們還需要對某些菜單項進行特殊的樣式處理，比如鼠標移動到菜單項上時的hover狀態。這可以使用CSS的偽類選擇器來實現：

.nav li:hover {
background-color: #ccc;
}
.nav li.active {
background-color: #008080;
color: #fff;
}

至此，我們就成功地實現了一個傳統的橫向導航菜單！ 完整的示例代碼如下：

<ul class="nav">
<li class="active"><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;
overflow: hidden;
}
.nav li {
display: inline-block;
margin-right: 10px;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}
.nav li a {
text-decoration: none;
color: #333;
}
.nav li:hover {
background-color: #ccc;
}
.nav li.active {
background-color: #008080;
color: #fff;
}