CSS橫向菜單是網(wǎng)頁(yè)設(shè)計(jì)中常見的一種導(dǎo)航菜單，它可以讓用戶快速地找到所需的頁(yè)面內(nèi)容。下面我們來(lái)看看CSS橫向菜單是怎樣貼的。

//HTML結(jié)構(gòu)：
<ul id="menu">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">分類</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
//CSS樣式：
#menu {
list-style: none; /* 去掉列表樣式 */
margin: 0; /* 去掉默認(rèn)的外邊距 */
padding: 0; /* 去掉默認(rèn)的內(nèi)邊距 */
background-color: #f8f8f8; /* 設(shè)置背景顏色 */
height: 40px; /* 設(shè)置高度 */
line-height: 40px; /* 設(shè)置行高 */
}
#menu li {
float: left; /* 左浮動(dòng) */
margin-right: 10px; /* 設(shè)置右側(cè)外邊距 */
}
#menu li a {
display: block; /* 轉(zhuǎn)換為塊級(jí)元素 */
padding: 0 15px; /* 設(shè)置左右內(nèi)邊距 */
color: #333; /* 設(shè)置字體顏色 */
text-decoration: none; /* 去掉下劃線 */
outline: none; /* 去掉虛線框 */
}
#menu li:hover {
background-color: #fff; /* 鼠標(biāo)懸浮時(shí)添加背景色 */
}
#menu li:hover a {
color: #F57C00; /* 鼠標(biāo)懸浮時(shí)改變字體顏色 */
}

通過(guò)以上代碼，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的橫向菜單。其中，使用了float屬性將li元素左浮動(dòng)，使它們排列在同一行。使用margin-right屬性給每個(gè)li元素設(shè)置了右側(cè)的外邊距，使它們之間有一定的間距。為了鼠標(biāo)懸浮時(shí)能夠有交互效果，使用了:hover偽類來(lái)改變li元素和a元素的樣式。