html垂直导航栏使用下拉菜单

垂直导航栏可以和下拉菜单结合使用，以实现更多的功能。下面是一个简单的示例：

HTML结构：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS样式：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-bottom: 10px;
  position: relative;
}

nav a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
}

nav ul li:hover > ul {
  display: block;
}

nav ul ul li {
  margin-bottom: 0;
}

上述代码中，通过嵌套ul元素和li元素来实现下拉菜单，使用CSS样式设置下拉菜单的位置和显示方式，并在父级li元素的:hover状态下显示下拉菜单。在实际使用中，可以根据需要进行进一步的样式调整和功能扩展。