隨著網頁設計的不斷進步，頁面的工具欄也越來越多元化。其中一個比較常見的設計就是右菜單。通過CSS的設置，我們可以輕松實現這種設計效果。

/* CSS代碼 */
.right-menu {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 80px;
border-left: 1px solid #ccc;
padding: 10px 0;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.right-menu li {
list-style: none;
padding: 10px;
text-align: center;
transition: background-color .3s;
cursor: pointer;
}
.right-menu li:hover {
background-color: #f5f5f5;
}

這段CSS代碼中，我們首先定義了一個名為“right-menu”的類，它是整個右菜單的容器，我們將它設置為fixed定位，并且將它的位置設為貼在右側，從而實現右菜單的位置固定。

我們還設定了這個容器元素的上邊界為頁面高度的50%，并且用transform屬性調整了垂直方向上的偏移，這兩個屬性共同實現了讓右菜單在高度較小的頁面中也可以很好地居中顯示的效果。

在容器元素的CSS設置中，我們還設置了其寬度、邊框樣式、內邊距以及陰影效果，使得整個右菜單看上去更加美觀大方，具有一定的立體感。

在容器內部，我們又定義了每一個菜單項的樣式，將其設為無序列表中的元素，去除了列表符號，還進行了一些配色和鼠標懸停時的動畫效果的設置，讓整個右菜單更加美觀和易用。

至此，我們就成功地完成了CSS右菜單的設計。通過合理地運用CSS的樣式屬性，我們可以輕松實現各種各樣的頁面效果，讓用戶體驗更好。