随着网页设计的不断进步，页面的工具栏也越来越多元化。其中一个比较常见的设计就是右菜单。通过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的样式属性，我们可以轻松实现各种各样的页面效果，让用户体验更好。