CSS水平展开子级

CSS可以很方便地实现水平展开子级（也称为微调菜单或下拉菜单）。在这篇文章中，我们将讨论如何使用CSS创建水平展开子级的示例。

HTML

我们首先需要创建HTML，用于展示我们的示例水平展开菜单。

  <ul class="menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a>
      <ul class="submenu">
        <li><a href="#">子菜单项1</a></li>
        <li><a href="#">子菜单项2</a></li>
        <li><a href="#">子菜单项3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>

在我们的HTML代码中，我们有一个主菜单，其中每个菜单项都有一个子菜单。我们的子菜单被包含在一个<ul>元素中，并放置在其上级菜单项的下方。

CSS

我们需要使用CSS为我们的菜单添加样式。以下是我们用来创建水平展开子级菜单的CSS代码：

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

.menu li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.menu li:last-child {
  margin-right: 0;
}

.menu a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
}

.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  min-width: 200px;
  display: none;
}

.menu li:hover > ul {
  display: block;
}

.menu ul li {
  display: block;
  margin: 0;
}

.menu ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}

.menu ul li a:hover {
  background-color: #444;
}

我们使用上述CSS代码设置列表项的display属性为inline-block，这是让子级菜单出现在父级旁边的关键。此外，我们使用了absolute定位来让子级菜单的位置从父级菜单的底部开始。

我们还使用了伪类选择器:hover来为子级菜单设置显示的属性。当用户针对父级菜单项悬停时，子菜单才会显示。

结论

使用上述HTML和CSS代码，我们可以创建一个漂亮的水平展开子级菜单。您可以在此基础上根据需求进一步修改和优化代码。

以下是示例代码运行效果：