CSS是前端开发必不可少的一项技术，它可以使我们的网站变得更加美观、易于交互。其中一项重要的技能就是如何使用CSS制作垂直导航菜单，下面介绍一种简单的实现方法。
<ul class="nav"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> </ul>
首先，我们在HTML中创建一个无序列表来表示菜单项，其中每个菜单项都被封装在一个
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
margin-bottom: 10px;
}
.nav a {
display: block;
padding: 10px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
border-radius: 5px;
}
.nav a:hover {
background-color: #333;
color: #f2f2f2;
}接下来，我们使用CSS对菜单进行样式定义，其中.nav样式将应用于整个菜单。我们使用list-style属性将标记列表样式清除，然后使用padding和margin属性来调整列表项的间距。使用li样式设置每个列表项之间的间距，使用a样式来设置链接的样式，包括背景颜色、颜色和文本装饰。使用:hover伪类来指定鼠标悬停时的样式。
至此，我们已经成功地使用CSS制作了垂直导航菜单效果。当然，根据需要，我们可以进一步调整样式来定制属于自己的具体效果。