html侧边栏下拉菜单

HTML侧边栏的下拉菜单通常用于网页布局中，提供一种组织内容的方式，用户可以通过点击或悬停在一个主选项上，显示出相关的子菜单。这种设计常见于响应式网站，尤其是在移动设备上，可以节省屏幕空间。创建一个简单的HTML侧边栏下拉菜单，你可以使用`<ul>`和`<li>`标签来定义列表结构，配合CSS设置样式，如添加`:hover`伪类控制鼠标悬停时显示隐藏的子菜单。

例如：

<nav>
  <div class="sidebar">
    <ul class="dropdown-menu">
      <li><a href="#">菜单项1</a></li>
      <li class="dropdown-item">
        <a href="#">菜单项2</a>
        <ul class="submenu">
          <li><a href="#">子菜单项1</a></li>
          <li><a href="#">子菜单项2</a></li>
        </ul>
      </li>
      <!-- 更多菜单项 -->
    </ul>
  </div>
</nav>

<style>
.dropdown-menu {
  position: relative;
}
.submenu {
  display: none;
  position: absolute; /* 隐藏默认 */
}
.dropdown-item:hover .submenu {
  display: block; /* 当父级被悬停时显示子菜单 */
}
</style>