垂直菜单

---

了解如何使用 CSS 创建垂直菜单。

---

垂直菜单

Home Link 1 Link 2 Link 3 Link 4

亲自试一试 »

---

如何创建垂直按钮组

步骤 1) 添加 HTML:

实例

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

---

步骤 2) 添加 CSS:

实例

.vertical-menu {
  width: 200px; /* 设置一个宽度 */
}

.vertical-menu a {
  background-color: #eee; /* 灰色背景色 */
  color: black; /* 黑色文字颜色 */
  display: block; /* 使链接显示在彼此下方 */
  padding: 12px; /* 添加一些填充 */
  text-decoration: none; /* 从链接中删除下划线 */
}

.vertical-menu a:hover {
  background-color: #ccc; /* 鼠标悬停时的深灰色背景 */
}

.vertical-menu a.active {
  background-color: #4CAF50; /* 为 "active/current" 链接添加绿色 */
  color: white;
} 亲自试一试 »

---

---

垂直滚动菜单

Home Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Link 7 Link 8 Link 9 Link 10

如果需要垂直滚动菜单，请设置特定 height 高度并添加 overflow 溢出属性:

实例

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
} 亲自试一试 »

提示: 查看我们的 操作指南 - 侧边导航教程，了解如何创建固定的全高侧边导航。