Question

我在按钮悬停中创建了一个下拉菜单，我还尝试在代码上使用Transition css属性，但该属性无法正常下拉。

下面的代码是引导程序下拉代码，请向我推荐正确的代码

.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

由于您没有共享所有代码，因此首先无法在display属性中添加过渡，因此也没有为top属性添加过渡。

尝试用.downtown-content隐藏transform: translateY(-100%)，然后将其悬停 transform: translateY(0); transition: all .25s linear（或在此处添加转换）

为什么Transition CSS在子选择器CSS中不起作用

1 个答案: