如何创建：垂直菜单

如何创建垂直按钮组

第一步 - 添加 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>

第二步 - 添加 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: #04AA6D; /* 给“活动/当前”链接添加绿色 */
  color: white;
}

亲自试一试

垂直滚动菜单

如果您想要垂直滚动菜单，请设置具体的高度并添加 overflow 属性：

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

亲自试一试

相关页面

教程：如何创建侧边导航栏