父级盒子鼠标悬停显示子级

要实现这个效果，可以使用CSS中的:hover伪类和子元素选择器。具体步骤如下：

1. 在父级盒子中添加一个子级盒子；
2. 设置子级盒子为display:none，使其默认不显示；
3. 使用:hover伪类选择器，当鼠标悬停在父级盒子上时，将子级盒子的display设置为block，使其显示出来。

具体的代码示例如下：

HTML代码：

<div class="parent-box">
  <p>父级盒子</p>
  <div class="child-box">
    <p>子级盒子</p>
  </div>
</div>

CSS代码：

.parent-box {
  position: relative; /* 父级盒子要设置为相对定位 */
}

.child-box {
  display: none; /* 子级盒子默认不显示 */
  position: absolute; /* 子级盒子要设置为绝对定位 */
  top: 100%; /* 子级盒子距离父级盒子顶部的距离 */
  left: 0; /* 子级盒子距离父级盒子左侧的距离 */
}

.parent-box:hover .child-box {
  display: block; /* 当父级盒子悬停时，子级盒子显示 */
}