通过HTML+CSS实现折叠样式完整代码

<div class="fold">
      <div class="child0">选项一</div>
      <div class="child1">选项11</div>
      <div class="child1">选项22</div>
      <div class="child1">选项33</div>
      <div class="child1">选项44</div>
    </div>

.fold{
    width: 200px;
    height: 51px;
    transition: all 1s;
    overflow: hidden;
    text-align: center;
    line-height: 50px;
    background-color: transparent;
    color: white;
    border-radius: 5px;
}
.fold:hover{
      height: 258px;
    }
.child0{
      width: 200px;
      height: 50px;
      background-color: #409eff;
      border-radius: 5px;
    }
    .child1{
      width: 200px;
      height: 50px;
      border-top: 1px solid white;
      border-radius: 5px;
      background-color: #409eff;
    }