CSS 可展开的树形菜单列表

在本文中，我们将介绍如何使用CSS创建可展开的树形菜单列表。树形菜单是一种常见的网页导航方式，它可以按照层级展示信息，并且可以动态地展开和折叠子菜单。通过使用CSS样式和一些简单的HTML结构，我们可以实现一个漂亮且功能强大的可展开的树形菜单。

阅读更多：CSS 教程

1. HTML结构

首先，我们需要一个基本的HTML结构来构建树形菜单列表。我们可以使用无序列表（

ul>）和列表项（

）来表示菜单的层级结构。每一个列表项都可以包含一个子菜单，这样就可以形成树形结构。

以下是一个简单的HTML结构示例：

<ul class="tree-menu">
  <li>
&lt;a href="#"&gt;菜单项1&lt;/a&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;子菜单项1.1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;子菜单项1.2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;子菜单项1.3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</li>
  <li>
&lt;a href="#"&gt;菜单项2&lt;/a&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;子菜单项2.1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;子菜单项2.2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</li>
  <li>
&lt;a href="#"&gt;菜单项3&lt;/a&gt;</li>
</ul>

在这个例子中，我们有三个一级菜单项（菜单项1、菜单项2和菜单项3）。菜单项1下面有三个子菜单项（子菜单项1.1、子菜单项1.2和子菜单项1.3），而菜单项2没有子菜单。

2. CSS样式

接下来，我们需要一些CSS样式来定义树形菜单的外观和交互效果。我们可以使用CSS选择器来选择不同的菜单项，并为它们定义样式。

以下是一个基本的CSS样式示例：

.tree-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tree-menu li {
  position: relative;
}
.tree-menu li ul {
  display: none;
}
.tree-menu li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}
.tree-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}
.tree-menu li li {
  margin-left: 20px;
}.tree-menu li li a {
  padding: 5px;
}

在这个例子中，我们使用了一些基本的CSS属性来定义树形菜单的样式。我们将列表样式设置为无，同时去除了列表项的默认空格和缩进。通过使用相对定位和绝对定位，我们可以实现子菜单在鼠标悬停时的显示和隐藏效果。对于链接（），我们设置了一些基本的样式，如内边距、文字装饰和颜色。

3. 示例

通过使用上述HTML结构和CSS样式，我们可以创建一个简单的可展开的树形菜单列表。当鼠标悬停在菜单项上时，子菜单会以动画效果展开。当鼠标离开时，子菜单会自动折叠起来。

以下是一个具体的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>可展开的树形菜单列表</title>
  <style>
/* CSS样式 */
</style>
</head>
<body>
  <ul class="tree-menu">
&lt;li&gt;
  &lt;a href="#"&gt;菜单项1&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;子菜单项1.1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;子菜单项1.2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;子菜单项1.3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
  &lt;a href="#"&gt;菜单项2&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;子菜单项2.1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;子菜单项2.2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
  &lt;a href="#"&gt;菜单项3&lt;/a&gt;
&lt;/li&gt;
</ul>
<script>
// JavaScript代码</script>
</body>
</html>