时间戳

首页 > 解决方案 > 将过渡添加到下拉菜单

html - 将过渡添加到下拉菜单

问题描述

如何将过渡添加到下拉菜单？以下是代码。

HTML

<div class="dropdown">
        <button>BLOG</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
</div>

CSS

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    display: none;
    position: absolute;
    height: 0px;
    transition: height 1s;
    z-index: 1;
}
.dropdown:hover .dropdown-content
{
    display: block;
    background-color: #0d0f5b;
    height: 60px;
}

此代码不显示转换。我该如何启用它？

标签： htmlcss

解决方案

高度不受过渡的影响，要获得这种高度过渡的视觉效果，您可以使用 max-height，但请记住，您不能有 display:none 和 display:block

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    display: none;
    position: absolute;
    height: 0px;
    transition: height 1s;
    z-index: 1;
}
.dropdown:hover .dropdown-content
{
    display: block;
    background-color: #0d0f5b;
    height: 60px;
}

至

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    position: absolute;
    max-height: 0px;
    transition: max-height 1s;
    z-index: 1;
    overflow: hidden;
}
.dropdown:hover .dropdown-content
{
    display: block;
    background-color: #0d0f5b;
    max-height: 60px;
}

如果可能删除显示：无，并用最大高度替换高度，因为最大高度可以有一个过渡，希望这能解决你的问题，我发现你的高度小于 60 像素，也许 20 像素更适合你的需要，试试将其调整为您想要的。祝你好运

推荐阅读