当前位置：首页 > CSS

制作css纵向菜单

2026-03-12 00:58:32CSS

基础结构

使用HTML的无序列表<ul>和列表项<li>构建菜单骨架，<a>标签定义菜单项链接：

<ul class="vertical-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

核心CSS样式

通过CSS移除默认列表样式，设置宽度、背景色及悬停效果：

.vertical-menu {
  width: 200px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #f1f1f1;
}

.vertical-menu li a {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
}

.vertical-menu li a:hover {
  background-color: #ddd;
}

添加交互效果

通过CSS增强视觉反馈，如当前选中状态和过渡动画：

.vertical-menu li a.active {
  background-color: #4CAF50;
  color: white;
}

.vertical-menu li a {
  transition: background-color 0.3s ease;
}

响应式调整

使用媒体查询适配移动端，调整为全宽度菜单：

@media screen and (max-width: 600px) {
  .vertical-menu {
    width: 100%;
  }
}

高级扩展

添加下拉子菜单功能（需配合JavaScript或CSS伪类）：

<li class="dropdown">
  <a href="#">更多选项 ▼</a>
  <ul class="dropdown-content">
    <li><a href="#">子项1</a></li>
    <li><a href="#">子项2</a></li>
  </ul>
</li>

对应CSS：

制作css纵向菜单

.dropdown-content {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #f9f9f9;
  min-width: 160px;
}

.dropdown:hover .dropdown-content {
  display: block;
}