带有子菜单的纯 CSS 垂直菜单

在网站界面设计中，菜单是非常重要的部分之一。若想实现一个具有展示效果，且显示子菜单的垂直菜单，可以用纯 CSS 实现。

下面是一个简单的实现示例：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

上述 HTML 代码的导航栏包含了四个主元素，且每个元素都包含了一个子菜单。在相应的 CSS 代码中，对 <li> 元素指定了相应的样式，以实现纵向排列。同时，通过应用 :hover 伪类和 transition 属性，在子菜单出现和消失时平滑地过渡。

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 10px;
  color: #333;
  background-color: #f2f2f2;
  text-decoration: none;
}

nav a:hover {
  background-color: #666;
  color: #fff;
}

nav ul ul {
  position: absolute;
  top: 0px;
  left: 200px;
  width: 200px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

nav li:hover > ul {
  visibility: visible;
  opacity: 1;
}

通过这样的方式，您可以轻松地添加子菜单并实现带有过渡效果的垂直菜单。

参考链接：CSS-only Vertical Drop Down Navigation with Transitions