CSS转换不起作用

我试图创建一个一次只显示/隐藏一个菜单的容器系统。它在大部分情况下都能正常工作，但我无法让CSS转换正常工作。我已经看了几个小时了，不明白为什么根本没有过渡发生

单击容器时，菜单需要下拉并向上滚动。我只需要一个起点，当用户单击容器时，就可以进行某种转换

CSS:

HTML:

福
foo

foo

foo

foo

foo

foo

foo

酒吧
酒吧

酒吧

酒吧

酒吧

酒吧

酒吧

酒吧

您不能设置动画以设置高度：自动。尝试硬编码高度，或将

max height

设置为较大的高度

---

是“最大高度”方法的一个很好的示例。

您不能设置动画以设置高度：自动。尝试硬编码高度，或将

max height

设置为较大的高度

是最大高度法的一个很好的例子

.singledrop {
    display: none;
}
.singledroplabel h2 {
    display: inline;
    color: #4e4e50;
}
.singledrop+.content {
    display: none;
    height: 0px;
    transition: height 0.2s ease-in-out;
    -webkit-transition: height 0.2s ease-in-out;
    -moz-transition: height 0.2s ease-in-out;
    -ms-transition: height 0.2s ease-in-out;
}
.singledrop:checked+.content {
    display: block;
    height: auto;
}

<div>
    <label class="singledroplabel" for="drop1"><h2>Foo</h2></label>
    <input class="singledrop" type="radio" name="menu" id="drop1" />
    <div class="content">
        foo<br/>
        foo<br/>
        foo<br/>
        foo<br/>
        foo<br/>
        foo<br/>
        foo<br/>
    </div>
</div>
<div>
    <label class="singledroplabel" for="drop2"><h2>Bar</h2></label>
    <input class="singledrop" type="radio" name="menu" id="drop2" />
    <div class="content">
        bar<br/>
        bar<br/>
        bar<br/>
        bar<br/>
        bar<br/>
        bar<br/>
        bar<br/>
    </div>
</div>