如何元素定位鼠标悬浮下的分类子选项

要实现在鼠标悬浮下显示分类子选项，可以使用CSS中的:hover伪类和子元素选择器。具体步骤如下：

1. 给鼠标悬浮的元素添加一个CSS类，例如 ".parent"。

2. 在CSS中定义 ".parent:hover" 选择器，表示当鼠标悬浮在 ".parent" 元素上时的样式。

3. 在 ".parent:hover" 中使用子元素选择器 ">" 来选择 ".parent" 元素下的子元素，例如 ".child"。

4. 定义 ".child" 元素的样式，使其在鼠标悬浮时显示。

下面是一个示例代码：

HTML：

<div class="parent">
  <a href="#">分类</a>
  <div class="child">
    <a href="#">子选项1</a>
    <a href="#">子选项2</a>
    <a href="#">子选项3</a>
  </div>
</div>

CSS：

.parent {
  position: relative;
}

.parent:hover > .child {
  display: block;
}

.child {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.child a {
  display: block;
  margin-bottom: 5px;
}

在上面的代码中，当鼠标悬浮在 ".parent" 元素上时，".child" 元素会显示出来。".child" 元素使用了绝对定位，以便于在 ".parent" 元素下方显示。".child" 中的链接元素（<a>）使用了块级显示，以便于垂直排列。