[分享]css列表向右侧展开显示子类

CSS 是建立在 HTML 基础之上的标记语言，它可以帮助开发者构建出更加优美、美观的网页。假设我们需要构建一个列表，其中包括多个子类别，我们可以使用 CSS 的强大功能使列表呈现出向右侧展开并显示子...

CSS 是建立在 HTML 基础之上的标记语言，它可以帮助开发者构建出更加优美、美观的网页。假设我们需要构建一个列表，其中包括多个子类别，我们可以使用 CSS 的强大功能使列表呈现出向右侧展开并显示子类别的效果。

/* 编写 CSS 样式 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  position: relative;
  float: left;
  margin-right: 20px; /* 调整子列表之间的距离 */
}

ul li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #fff;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

ul ul li {
  clear: both;
  width: 100%;
  margin: 0;
}

ul ul li a {
  color: #333;
  text-decoration: none;
  display: block;
  padding: 5px;
}

ul ul li a:hover {
  background-color: #f5f5f5;
} 

这段代码主要分为三个部分：

• 1、为无序列表添加基础样式

• 2、设置子列表位置和样式

• 3、鼠标悬浮时显示子列表

其中，ul li:hover ul { display: block; } 部分是实现子列表悬浮显示的核心。这里，我们给每一个子类项目的父级添加了悬浮选择器，表示鼠标悬停在列表上方时，显示该项目下方的子列表。

通过这段简单的 CSS 代码，我们可以营造出一种干净利落、直观易用的列表效果，提高用户的使用体验。