二级导航栏在侧边弹出

二级导航栏是指在一个更复杂的导航结构中，当一级导航（通常是一级菜单或顶级菜单）被激活时，从侧边以弹出窗口或者下拉菜单的形式显示更多的子项或深层链接。这种设计常见于大型网站，有助于组织大量的内容和保持页面简洁，用户可以在不影响主要内容的情况下轻松浏览更多选择。

通常，当你点击一级导航按钮时，二级导航栏会在一定时间内平滑地从侧边或底部弹出，提供额外的层次导航。在许多情况下，二级导航还会自动隐藏，直到用户需要再次展开。这种设计常结合CSS动画和JavaScript事件处理，例如使用`hover`、`click`或者`focus`来触发二级导航的显示或隐藏。

实现二级导航栏，可以采用多种方法，比如使用CSS的`position: absolute`配合过渡效果，或者利用Bootstrap、Ant Design等前端UI库提供的现成组件。在JavaScript中，可能会使用事件监听器控制元素的显示和隐藏状态。

一个简单的示例（仅用纯CSS实现）：

<nav id="main-nav">
  <ul>
    <li><a href="#">一级菜单项</a>
      <ul class="sub-menu" style="display: none;">
        <li><a href="#">二级菜单项1</a></li>
        <li><a href="#">二级菜单项2</a></li>
      </ul>
    </li>
  </ul>
</nav>

<style>
.sub-menu {
  position: absolute; /* 隐藏并定位 */
  left: 0;
  display: flex; /* 展开时变为flex布局 */
  list-style-type: none;
  background-color: #f9f9f9;
  transition: all 0.3s ease-in-out;
}

#main-nav li:hover .sub-menu { /* 当一级菜单项被鼠标悬停时 */
  display: block;
}
</style>