纵向导航栏怎么制作

纵向导航栏可以使用HTML和CSS来制作。以下是一个简单的例子：

HTML代码：

<div class="nav">
  <ul>
    <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>
</div>

CSS代码：

.nav {
  width: 200px; /* 导航栏宽度 */
  background-color: #f0f0f0;
  padding: 10px;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin-bottom: 10px;
}

.nav a {
  display: block;
  padding: 5px;
  color: #333;
  text-decoration: none;
}

.nav a:hover {
  background-color: #333;
  color: #fff;
}

解释：

1. 使用 `div` 元素创建导航栏容器；
2. 在容器内部使用 `ul` 元素创建一个无序列表，用于存放菜单项；
3. 使用 `li` 元素创建每一个菜单项；
4. 使用 `a` 元素创建超链接，作为菜单项的文本内容；
5. 使用 CSS 对导航栏进行样式设置，包括宽度、背景颜色、内边距、列表样式等；
6. 对菜单项和超链接进行样式设置，包括边距、字体颜色、文本装饰等；
7. 使用 `:hover` 伪类为菜单项添加鼠标悬停效果。

你可以根据自己的需求，进一步修改样式和布局。