CSS网页布局入门教程13：下拉及多级弹出式菜单

让我为您讲解“CSS网页布局入门教程13：下拉及多级弹出式菜单”的完整攻略。

让我为您讲解“CSS网页布局入门教程13：下拉及多级弹出式菜单”的完整攻略。

1. 下拉式菜单

下拉式菜单常见于网页导航栏中，能够使页面看起来更美观、更易用。

HTML 结构

下拉式菜单的 HTML 结构需要包含一个触发下拉的按钮和一个下拉菜单。

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

CSS 样式

为了让下拉菜单实现下拉和隐藏，我们需要使用绝对定位和显示/隐藏控制的 CSS 样式。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1; /* 设置下拉菜单在上方 */
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* 当鼠标移动到下拉按钮上方时，下拉菜单会显示 */

2. 多级弹出式菜单

多级弹出式菜单是在下拉式菜单的基础上，增加了多层子菜单，让网页的导航更加完善。

HTML 结构

多级弹出式菜单的 HTML 结构与普通下拉菜单相同，只是在下拉菜单下面增加了子菜单。

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <div class="dropdown-submenu">
      <a href="#">选项3</a>
      <div class="dropdown-submenu-content">
        <a href="#">选项3-1</a>
        <a href="#">选项3-2</a>
      </div>
    </div>
  </div>
</div>

CSS 样式

多级弹出式菜单的 CSS 样式需要添加一些新的属性，比如设置子菜单的位置和样式。

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu-content {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

.dropdown-submenu:hover .dropdown-submenu-content {
  display: block;
}

这里，我们用到了子选择器 > 来设置子菜单的样式。

示例

在代码示例中，我创建了一个简单的多级弹出式菜单，让您可以更好地理解它的使用方式。点击查看示例代码和效果。

另一个示例是在 Bootstrap 中创建使用多级弹出式菜单。在 Bootstrap 中，您可以通过添加 CSS 类名称来实现多级弹出式菜单。点击查看示例代码和效果。

这就是“CSS网页布局入门教程13：下拉及多级弹出式菜单”的完整攻略。