html - 为什么 Transition css 在子选择器 css 中不起作用

Question

我在按钮悬停中创建了一个下拉菜单， 我还在我的代码上尝试了 transition css 属性，但它无法顺利下拉。

下面的代码是 Bootstrap 下拉代码，请建议我把正确的代码放在哪里

.dropdown {
                  position: relative;
                  display: inline-block;
                }
                
                .dropdown-content {
                  display: none;
                }
                .dropdown:hover > .dropdown-content {
                  display: block;
                  top: 35px;
                }

<div class="dropdown p-0">
                  <button type="button" class="btn btn-icon btn-light" data-toggle="dropdown" aria-expanded="false">
                   dropdown
                  </button>
                  <div class="dropdown-arrow"></div>

                  <ul class="dropdown-menu dropdown-menu-right dropdown-content">
                      <li> <a class="dropdown-item"><i class="fe fe-file-text mr-2"
                        aria-hidden="true"></i>Add Task</a></li>
                        <li> <a class="dropdown-item"><i class="fe fe-zap mr-2"
                          aria-hidden="true"></i>Add Risk</a></li>
                          <li> <a class="dropdown-item"><i class="fe fe-trending-up mr-2"
                            aria-hidden="true"></i>Add Milestone</a></li>
                    <li> <a class="dropdown-item" ><i class="fe fe-trash-2 mr-2"
                          aria-hidden="true"></i>Remove Me form This Project</a> </li>
                    <li> <a class="dropdown-item" ><i class="fe fe-edit mr-2"
                          aria-hidden="true"></i>Edit</a> </li>
                    <li> <a class="dropdown-item"><i class="fe fe-check-circle mr-2"
                          aria-hidden="true"></i>Complete</a></li>
                          
                  </ul>
                </div>

Answer 1

由于您没有共享所有代码，首先您不能在显示属性中添加转换，您没有为顶部属性添加转换。

尝试使用transform: translateY(-100%)隐藏.downtown-content，然后悬停 转换:translateY(0);过渡:所有 .25s 线性(或在此处添加您的过渡)