CSS橫向2級(jí)導(dǎo)航是一種常用的網(wǎng)站導(dǎo)航方式，它能夠讓用戶(hù)迅速找到所需內(nèi)容。下面我們來(lái)了解一下怎么用CSS實(shí)現(xiàn)這種導(dǎo)航。

/*CSS樣式*/
nav {
background-color: #333;
display: flex;
justify-content: center;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0 15px;
}
a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
/*HTML代碼*/
<nav>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li>
<a href="#">分類(lèi)</a>
<ul>
<li><a href="#">手機(jī)</a></li>
<li><a href="#">電腦</a></li>
<li><a href="#">智能家居</a></li>
</ul>
</li>
<li><a href="#">購(gòu)物車(chē)</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>

我們首先需要在HTML中定義一個(gè)nav元素，并在其中嵌套一個(gè)ul元素作為一級(jí)導(dǎo)航欄。每一個(gè)li元素就是一個(gè)導(dǎo)航欄的選項(xiàng)。如果該選項(xiàng)包含二級(jí)選項(xiàng)，那么就需要再嵌套一個(gè)ul元素。最終結(jié)果就是一個(gè)嵌套的導(dǎo)航欄。

接下來(lái)，我們使用CSS樣式對(duì)導(dǎo)航欄進(jìn)行美化。首先給nav元素一個(gè)背景色，并設(shè)置它的display為flex，以讓其內(nèi)部元素水平居中。接著對(duì)ul元素進(jìn)行一些樣式設(shè)置，如將其display設(shè)置為flex，將它的list-style、margin和padding都設(shè)為0等。最后，我們給所有的a元素設(shè)置顏色、無(wú)下劃線(xiàn)和大寫(xiě)字母。

這樣，一個(gè)CSS橫向2級(jí)導(dǎo)航就完成了。它不僅美觀(guān)，而且易于使用，為用戶(hù)帶來(lái)良好的體驗(yàn)。