CSS中帶加號(hào)的菜單可以很好地搭配一些動(dòng)態(tài)效果，讓網(wǎng)站看起來(lái)更加生動(dòng)有趣。下面我們來(lái)學(xué)習(xí)一下如何制作這樣的菜單：

/*HTML代碼*/
<ul id="menu">
<li><a href="#">主頁(yè)</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
/*CSS代碼*/
#menu li{
display: inline-block;
margin-right: 10px;
}
#menu a{
display: inline-block;
padding: 10px;
background-color: #ccc;
color: #fff;
text-decoration: none;
}
/*鼠標(biāo)懸停時(shí)菜單的樣式*/
#menu a:hover{
background-color: #666;
}
/*加號(hào)樣式*/
#menu li:not(:last-child)::after{
content: "+";
margin-left: 10px;
color: #fff;
}

以上代碼中，我們首先定義了ul元素的id為menu，然后定義了每個(gè)li元素的樣式為inline-block，并設(shè)置了右邊距。每個(gè)a元素的樣式也被設(shè)置為inline-block，同時(shí)還設(shè)置了背景顏色、文字顏色和內(nèi)邊距。

接下來(lái)，我們通過(guò):hover偽類(lèi)給菜單設(shè)置了鼠標(biāo)懸停時(shí)的樣式。

最后，在li元素的:not(:last-child)選擇器中，我們使用了::after偽元素插入了一個(gè)加號(hào)，并設(shè)置了其樣式。