如何操作 - 垂直菜单

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

垂直菜单

如何创建垂直按钮组

步骤1）添加HTML：

示例

步骤2）添加CSS：

示例

.vertical-menu {
  width: 200px; /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #04AA6D; /* Add a green color to the "active/current" link */
  color: white;
}

亲自试一试 »

垂直滚动菜单

家链接1 链接2 链接3 链接4 链接5 链接6 链接7 链接8 链接9 链接10

设置具体的height并添加overflow属性如果你想要一个垂直滚动菜单：

示例

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

亲自试一试 »

提示：看看我们的操作方法 - 侧面导航教程学习如何创建固定的全高侧面导航。