如何用CSS实现网页垂直导航菜单布局？

要使用CSS实现网页垂直导航菜单布局， 需要创建一个HTML结构，其中包含一个无序列表来组织导航链接。每个菜单项使用列表项表示，而每个链接则使用锚标签。

接下来，使用CSS来样式化这个菜单。需要设置无序列表的样式，使其不显示默认的列表样式，并使用适当的间距和布局。

#vertical-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  width: 200px;
}
#vertical-menu li {
  padding: 10px;
  border-bottom: 1px solid #444;
}
#vertical-menu a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#vertical-menu a:hover {
  background-color: #555;
}

在这个示例中，菜单项以垂直方式排列，背景颜色为深灰色，链接为白色。当鼠标悬停在链接上时，背景颜色会变深，以提供视觉反馈。

为了增强用户体验，可以添加一些额外的CSS效果，例如悬停时的动画或子菜单。

#vertical-menu li:hover ul {
  display: block;
}
#vertical-menu ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}

这个示例展示了如何使用CSS来创建一个简单的垂直导航菜单，并添加了子菜单功能。通过调整HTML结构和CSS样式，可以进一步定制菜单的外观和行为，以满足特定需求。