CSS是網頁設計中最重要的一環，在設計網頁時，二級導航欄也是不可或缺的元素，今天我們來學習一下如何使用CSS實現橫向的二級導航欄。

首先，在HTML中我們需要創建一個包含一級導航欄和二級導航欄的結構，可以使用ul和li標簽來實現：

<ul class="menu">
<li>
<a href="#">首頁</a>
<ul>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</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>
</ul>

接下來，我們需要使用CSS來定義樣式，對一級導航欄和二級導航欄進行排列并設置其外觀，具體代碼如下：

/* 一級導航欄樣式 */
.menu {
list-style: none; 
padding: 0;
margin: 0;
display: flex;
}
.menu li {
margin-right: 20px;
position: relative;
}
.menu li:last-child {
margin-right: 0;
}
.menu a {
display: block;
padding: 10px;
color: #000;
text-decoration: none;
}
.menu a:hover {
color: #fff;
background-color: #333;
}
/* 二級導航欄樣式 */
.menu ul {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
display: none;
list-style: none;
padding: 0;
margin: 0;
}
.menu li:hover ul {
display: block;
}
.menu ul li {
margin-right: 0;
background-color: #fff;
}
.menu ul li:last-child {
margin-right: 0;
}
.menu ul a {
padding: 5px 10px;
display: block;
color: #333;
text-decoration: none;
}
.menu ul a:hover {
color: #fff;
background-color: #333;
}

以上就是實現橫向二級導航欄的全部代碼，有了以上代碼，我們就可以輕松地創建出橫向的二級導航欄了！