CSS中帶加號的菜單可以很好地搭配一些動態(tài)效果，讓網站看起來更加生動有趣。下面我們來學習一下如何制作這樣的菜單：

/*HTML代碼*/
<ul id="menu">
<li><a href="#">主頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</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;
}
/*鼠標懸停時菜單的樣式*/
#menu a:hover{
background-color: #666;
}
/*加號樣式*/
#menu li:not(:last-child)::after{
content: "+";
margin-left: 10px;
color: #fff;
}

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

接下來，我們通過:hover偽類給菜單設置了鼠標懸停時的樣式。

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