html导航栏纵向下拉菜单

HTML 导航栏中的纵向下拉菜单通常是指通过CSS和JavaScript（如jQuery）实现的一种交互式设计，当用户将鼠标悬停在一个链接上时，会显示一个垂直方向的下拉列表，通常用于展示相关的子菜单项。这种设计有助于节省空间，并提供清晰的层次结构。下面是一个简单的例子：

<nav>
  <ul class="dropdown">
    <li><a href="#">主菜单</a>
      <ul class="dropdown-menu">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
      </ul>
    </li>
    <!-- 其他菜单项... -->
  </ul>
</nav>

<style>
.dropdown-menu {
  display: none;
  position: absolute; /* 设置下拉框相对于父元素的位置 */
  width: 100%;
  background-color: #f9f9f9;
}
.dropdown:hover .dropdown-menu { /* 当鼠标悬停时显示下拉菜单 */
  display: block;
}
</style>

在这个例子中，`.dropdown` 和 `.dropdown-menu` 是CSS选择器，`.dropdown:hover .dropdown-menu` 部分则使用了伪类`:hover` 来设置交互效果。